---
url: /components/search/specs.md
description: >-
  Search lets people enter a keyword or phrase to get relevant information.
  Search bars can display suggested keywords or phrases as the user types.
---

# Search

Search lets people enter a keyword or phrase to get relevant information. Search bars can display suggested keywords or phrases as the user types.

[Overview](overview.md) · **Specs** · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

## Variants

<video controls src="https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fm3%2Fimages%2Fmm28azl5-GM3%20-%20Search%20Bar%20-%20Specs%2001%20-%203P%20-%20v02.mp4?alt=media" aria-label="Typing “Ping” into a search bar reveals a list of email results."></video>

When a person executes a **search**, results appear in a list below the search bar

| Variant | M3        | M3 Expressive |
| ------- | --------- | :-----------: |
| Search  | Available |   Available   |

## Configurations

### Style

Search comes in two styles:

* Contained: Has an [expressive](https://m3.material.io/blog/building-with-m3-expressive "M3 Expressive is a major update to Material 3, adding visually stunning features, components, and variants, plus updates to the shape, motion, and typography systems.") look and feel. It uses a filled container to separate a search bar from a [list](../lists/overview.md "Lists are continuous, vertical indexes of text and images.") of suggestions or results
* Divided (baseline): Doesn’t have the latest visual style, motion, or flexibility

![An email inbox search bar in a contained style.](/assets/058a3061-mm17d95o-02-3p.wFgb2JTu.webp)

The contained style has a persistent, filled container, expressive motion, and rounded shape

![An email inbox search bar in a divided style.](/assets/9085532f-mm17dfzg-03-3p.C2RzIcFA.webp)

The divided (baseline) style uses a divider to separate the search bar from suggestions and results

<a id="fc12e839-f356-4f48-9bd5-0ed210565bfe"></a>

### Layout

Search suggestions and results appear in customizable lists, with two layout options: full-screen and docked. [More on search layouts](guidelines.md#4f6c921c-795f-4e06-9b12-27ae7d502adb)

![Full-screen search results with a search bar in the contained style.](/assets/59575d9f-mm17dsh8-04-3p.B_67hFou.webp)

Full-screen layout in the contained style

![Docked search results with a search bar in the contained style.](/assets/328ba4bf-mm17e01j-05-3p.DbvomAtg.webp)

Docked layout in the contained style

![Full-screen search results with a search bar in the divided style.](/assets/84e2401e-mm17e8r8-06-3p.ZuocpSnt.webp)

Full-screen layout in the divided style

![Docked search results with a search bar in the divided style.](/assets/f928338d-mm17efaq-07-3p.J5n6GlQ0.webp)

Docked layout in the divided style

| Category | Configuration       | M3        | M3 Expressive                   |
| -------- | ------------------- | --------- | ------------------------------- |
| Style    | Contained           | --        | Available                       |
|          | Divided             | Available | Not recommended. Use contained. |
| Layout   | Docked, full-screen | Available | Available                       |

## Tokens & specs

Use the table's menu to select a token set. The **search bar** set only contains tokens for the unfocused search bar. The **search view** set contains all other tokens when interacting with search, including all styles and layouts. [Learn more about design tokens](../../foundations/design-tokens/overview.md)

::: token-table token-table-07341534518f78d0-e770c311
**Search tokens** · 2 token sets · 85 tokens · [live token table](https://m3.material.io/components/search/specs) · DSDB `TOKEN_TABLE.07341534518f78d0`

* Default context: Theme: Light · Platform: Android · Audience: 3P · Font: Static · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
* Not configurable here (group default used): Motion scheme: Standard · Language height: Small
* Other contexts: Theme: Dark · Platform: Web, Compose · Contrast: Medium contrast, High contrast. "Other contexts" lists values that differ from the default when only that one context changes.
* Reference chain: aliases from the token to its source value (`token → alias → … → value`). "—" means the token holds a literal value.

**Search - Bar** · `md.comp.search-bar` · 49 tokens

For baseline search bar and expressive search.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Layout and Text › Baseline | `md.comp.search-bar.trailing-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| Layout and Text › Baseline | `md.comp.search-bar.leading-icon.leading-icon-label-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| Layout and Text › Baseline | `md.comp.search-bar.trailing-icon.label-trailing-icon-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| Layout and Text › Baseline | `md.comp.search-bar.leading-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| Layout and Text › Common tokens | `md.comp.search-bar.container.height` | Length | — | `56dp` | — |
| Layout and Text › Common tokens | `md.comp.search-bar.container.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — |
| Layout and Text › Common tokens | `md.comp.search-bar.avatar.size` | Length | — | `30dp` | — |
| Layout and Text › Common tokens | `md.comp.search-bar.avatar.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — |
| Layout and Text › Common tokens | `md.comp.search-bar.icon.size` | Length | — | `24dp` | — |
| Layout and Text › Common tokens | `md.comp.search-bar.supporting-text.type` | Typography | composite<br>font names: `md.comp.search-bar.supporting-text.font` → `md.sys.typescale.body-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.search-bar.supporting-text.weight` → `md.sys.typescale.body-large.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.search-bar.supporting-text.size` → `md.sys.typescale.body-large.size`<br>line height: `md.comp.search-bar.supporting-text.line-height` → `md.sys.typescale.body-large.line-height`<br>font tracking: `md.comp.search-bar.supporting-text.tracking` → `md.sys.typescale.body-large.tracking` | `Roboto · weight 400 · size 16pt · line height 24pt · tracking 0.5pt` | — |
| Layout and Text › Common tokens | `md.comp.search-bar.supporting-text.font` | Font names | `md.sys.typescale.body-large.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Layout and Text › Common tokens | `md.comp.search-bar.supporting-text.line-height` | Line height | `md.sys.typescale.body-large.line-height` | `24pt` | — |
| Layout and Text › Common tokens | `md.comp.search-bar.supporting-text.size` | Font size | `md.sys.typescale.body-large.size` | `16pt` | — |
| Layout and Text › Common tokens | `md.comp.search-bar.supporting-text.weight` | Font weight | `md.sys.typescale.body-large.weight` → `md.ref.typeface.weight-regular` | `400` | — |
| Layout and Text › Common tokens | `md.comp.search-bar.supporting-text.tracking` | Font tracking | `md.sys.typescale.body-large.tracking` | `0.5pt` | — |
| Layout and Text › Common tokens | `md.comp.search-bar.input-text.type` | Typography | composite<br>font names: `md.comp.search-bar.input-text.font` → `md.sys.typescale.body-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.search-bar.input-text.weight` → `md.sys.typescale.body-large.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.search-bar.input-text.size` → `md.sys.typescale.body-large.size`<br>line height: `md.comp.search-bar.input-text.line-height` → `md.sys.typescale.body-large.line-height`<br>font tracking: `md.comp.search-bar.input-text.tracking` → `md.sys.typescale.body-large.tracking` | `Roboto · weight 400 · size 16pt · line height 24pt · tracking 0.5pt` | — |
| Layout and Text › Common tokens | `md.comp.search-bar.input-text.font` | Font names | `md.sys.typescale.body-large.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Layout and Text › Common tokens | `md.comp.search-bar.input-text.line-height` | Line height | `md.sys.typescale.body-large.line-height` | `24pt` | — |
| Layout and Text › Common tokens | `md.comp.search-bar.input-text.size` | Font size | `md.sys.typescale.body-large.size` | `16pt` | — |
| Layout and Text › Common tokens | `md.comp.search-bar.input-text.weight` | Font weight | `md.sys.typescale.body-large.weight` → `md.ref.typeface.weight-regular` | `400` | — |
| Layout and Text › Common tokens | `md.comp.search-bar.input-text.tracking` | Font tracking | `md.sys.typescale.body-large.tracking` | `0.5pt` | — |
| Layout and Text › Common tokens | `md.comp.search-bar.container.surface-tint-layer.color` (deprecated) | Color | `md.sys.color.surface-tint` → `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
| Layout and Text › Contained (expressive) | `md.comp.search-bar.contained.trailing-margin` | Length | `md.sys.measurement.space300` | `24dp` | — |
| Layout and Text › Contained (expressive) | `md.comp.search-bar.contained.motion.spring` | Custom composite | `md.sys.motion.spring.fast.spatial` → composite<br>+2 variation axes | `damping 0.9 · stiffness 1400` | — |
| Layout and Text › Contained (expressive) | `md.comp.search-bar.contained.leading-space` | Length | `md.sys.measurement.space50` | `4dp` | — |
| Layout and Text › Contained (expressive) | `md.comp.search-bar.contained.trailing-space` | Length | `md.sys.measurement.space50` | `4dp` | — |
| Layout and Text › Contained (expressive) | `md.comp.search-bar.contained.no-actions.leading-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| Layout and Text › Contained (expressive) | `md.comp.search-bar.contained.no-actions.trailing-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| Layout and Text › Contained (expressive) | `md.comp.search-bar.contained.icon-label.gap` | Length | `md.sys.measurement.space50` | `4dp` | — |
| Layout and Text › Contained (expressive) | `md.comp.search-bar.contained.avatar.target-size` | Length | — | `48dp` | — |
| Layout and Text › Contained (expressive) | `md.comp.search-bar.contained.trailing-actions.gap` | Length | `md.sys.measurement.space0` | `0dp` | — |
| Layout and Text › Contained (expressive) | `md.comp.search-bar.contained.trailing-actions.leading-space` | Length | `md.sys.measurement.space50` | `4dp` | — |
| Layout and Text › Contained (expressive) | `md.comp.search-bar.contained.trailing-actions.trailing-space` | Length | `md.sys.measurement.space50` | `4dp` | — |
| Layout and Text › Contained (expressive) | `md.comp.search-bar.contained.leading-margin` | Length | `md.sys.measurement.space300` | `24dp` | — |
| Color › Hovered | `md.comp.search-bar.hover.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Color › Hovered | `md.comp.search-bar.hover.supporting-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Hovered | `md.comp.search-bar.hover.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Enabled | `md.comp.search-bar.container.color` | Color | `md.sys.color.surface-container-high` → `md.ref.palette.neutral92` | `#ECE6F0` | Dark: `#2B2930` via `md.ref.palette.neutral17` |
| Color › Enabled | `md.comp.search-bar.container.elevation` | Elevation | `md.sys.elevation.level3` | `6dp` | — |
| Color › Enabled | `md.comp.search-bar.leading-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Enabled | `md.comp.search-bar.trailing-icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Enabled | `md.comp.search-bar.supporting-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Enabled | `md.comp.search-bar.input-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Pressed | `md.comp.search-bar.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Color › Pressed | `md.comp.search-bar.pressed.supporting-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color › Pressed | `md.comp.search-bar.pressed.state-layer.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color › Focused | `md.comp.search-bar.focus.indicator.thickness` | Length | `md.sys.state.focus-indicator.thickness` | `3dp` | — |
| Color › Focused | `md.comp.search-bar.focus.indicator.outline.offset` | Length | `md.sys.state.focus-indicator.outer-offset` | `2dp` | — |
| Color › Focused | `md.comp.search-bar.focus.indicator.color` | Color | `md.sys.color.secondary` → `md.ref.palette.secondary40` | `#625B71` | Dark: `#CCC2DC` via `md.ref.palette.secondary80`<br>Medium contrast: `#4A4458` via `md.ref.palette.secondary30`<br>High contrast: `#332D41` via `md.ref.palette.secondary20` |

**Search - View** · `md.comp.search-view` · 36 tokens

For baseline search view and expressive search when activated.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Color | `md.comp.search-view.contained.background.color` | Color | `md.sys.color.surface-container-low` → `md.ref.palette.neutral96` | `#F7F2FA` | Dark: `#1D1B20` via `md.ref.palette.neutral10` |
| Color | `md.comp.search-view.container.elevation` | Elevation | `md.sys.elevation.level3` | `6dp` | — |
| Color | `md.comp.search-view.header.supporting-text.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color | `md.comp.search-view.header.input-text.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color | `md.comp.search-view.header.leading-icon.color` | Color | `md.sys.color.on-surface` → `md.ref.palette.neutral10` | `#1D1B20` | Dark: `#E6E0E9` via `md.ref.palette.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
| Color | `md.comp.search-view.header.trailing-icon.color` | Color | `md.sys.color.on-surface-variant` → `md.ref.palette.neutral-variant30` | `#49454F` | Dark: `#CAC4D0` via `md.ref.palette.neutral-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High contrast: `#000000` via `md.ref.palette.neutral-variant0` |
| Color | `md.comp.search-view.divider.color` | Color | `md.sys.color.outline` → `md.ref.palette.neutral-variant50` | `#79747E` | Dark: `#938F99` via `md.ref.palette.neutral-variant60`<br>Medium contrast: `#49454F` via `md.ref.palette.neutral-variant30`<br>High contrast: `#322F37` via `md.ref.palette.neutral-variant20` |
| Color | `md.comp.search-view.container.color` | Color | `md.sys.color.surface-container-high` → `md.ref.palette.neutral92` | `#ECE6F0` | Dark: `#2B2930` via `md.ref.palette.neutral17` |
| Layout and Text › Divided (baseline) | `md.comp.search-view.full-screen.header.container.height` | Length | — | `72dp` | — |
| Layout and Text › Divided (baseline) | `md.comp.search-view.docked.header.container.height` | Length | — | `56dp` | — |
| Layout and Text › Divided (baseline) | `md.comp.search-view.leading-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| Layout and Text › Divided (baseline) | `md.comp.search-view.trailing-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| Layout and Text › Divided (baseline) | `md.comp.search-view.leading-icon.leading-icon-label-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| Layout and Text › Divided (baseline) | `md.comp.search-view.trailing-icon.label-trailing-icon-space` | Length | `md.sys.measurement.space200` | `16dp` | — |
| Layout and Text › Divided (baseline) | `md.comp.search-view.docked.container.shape` | Shape | `md.sys.shape.corner.extra-large` | `Rounded corners 28dp` | — |
| Layout and Text › Common tokens | `md.comp.search-view.header.supporting-text.type` | Typography | composite<br>font names: `md.comp.search-view.header.supporting-text.font` → `md.sys.typescale.body-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.search-view.header.supporting-text.weight` → `md.sys.typescale.body-large.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.search-view.header.supporting-text.size` → `md.sys.typescale.body-large.size`<br>line height: `md.comp.search-view.header.supporting-text.line-height` → `md.sys.typescale.body-large.line-height`<br>font tracking: `md.comp.search-view.header.supporting-text.tracking` → `md.sys.typescale.body-large.tracking` | `Roboto · weight 400 · size 16pt · line height 24pt · tracking 0.5pt` | — |
| Layout and Text › Common tokens | `md.comp.search-view.header.supporting-text.font` | Font names | `md.sys.typescale.body-large.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Layout and Text › Common tokens | `md.comp.search-view.header.supporting-text.line-height` | Line height | `md.sys.typescale.body-large.line-height` | `24pt` | — |
| Layout and Text › Common tokens | `md.comp.search-view.header.supporting-text.size` | Font size | `md.sys.typescale.body-large.size` | `16pt` | — |
| Layout and Text › Common tokens | `md.comp.search-view.header.supporting-text.weight` | Font weight | `md.sys.typescale.body-large.weight` → `md.ref.typeface.weight-regular` | `400` | — |
| Layout and Text › Common tokens | `md.comp.search-view.header.supporting-text.tracking` | Font tracking | `md.sys.typescale.body-large.tracking` | `0.5pt` | — |
| Layout and Text › Common tokens | `md.comp.search-view.header.input-text.type` | Typography | composite<br>font names: `md.comp.search-view.header.input-text.font` → `md.sys.typescale.body-large.font` → `md.ref.typeface.plain`<br>font weight: `md.comp.search-view.header.input-text.weight` → `md.sys.typescale.body-large.weight` → `md.ref.typeface.weight-regular`<br>font size: `md.comp.search-view.header.input-text.size` → `md.sys.typescale.body-large.size`<br>line height: `md.comp.search-view.header.input-text.line-height` → `md.sys.typescale.body-large.line-height`<br>font tracking: `md.comp.search-view.header.input-text.tracking` → `md.sys.typescale.body-large.tracking` | `Roboto · weight 400 · size 16pt · line height 24pt · tracking 0.5pt` | — |
| Layout and Text › Common tokens | `md.comp.search-view.header.input-text.font` | Font names | `md.sys.typescale.body-large.font` → `md.ref.typeface.plain` | `Roboto` | — |
| Layout and Text › Common tokens | `md.comp.search-view.header.input-text.line-height` | Line height | `md.sys.typescale.body-large.line-height` | `24pt` | — |
| Layout and Text › Common tokens | `md.comp.search-view.header.input-text.size` | Font size | `md.sys.typescale.body-large.size` | `16pt` | — |
| Layout and Text › Common tokens | `md.comp.search-view.header.input-text.weight` | Font weight | `md.sys.typescale.body-large.weight` → `md.ref.typeface.weight-regular` | `400` | — |
| Layout and Text › Common tokens | `md.comp.search-view.header.input-text.tracking` | Font tracking | `md.sys.typescale.body-large.tracking` | `0.5pt` | — |
| Layout and Text › Common tokens | `md.comp.search-view.full-screen.container.shape` | Shape | `md.sys.shape.corner.none` | `Rounded corners 0dp` | — |
| Layout and Text › Contained (expressive) | `md.comp.search-view.contained.trailing-margin` | Length | `md.sys.measurement.space150` | `12dp` | — |
| Layout and Text › Contained (expressive) | `md.comp.search-view.contained.docked.bar-results.gap` | Length | `md.sys.measurement.space25` | `2dp` | — |
| Layout and Text › Contained (expressive) | `md.comp.search-view.contained.docked.results.shape` | Shape | `md.sys.shape.corner.medium` | `Rounded corners 12dp` | — |
| Layout and Text › Contained (expressive) | `md.comp.search-view.contained.docked.bar.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — |
| Layout and Text › Contained (expressive) | `md.comp.search-view.contained.full-screen.bar.container.height` | Length | — | `56dp` | — |
| Layout and Text › Contained (expressive) | `md.comp.search-view.contained.icon-label.gap` | Length | `md.sys.measurement.space50` | `4dp` | — |
| Layout and Text › Contained (expressive) | `md.comp.search-view.contained.leading-margin` | Length | `md.sys.measurement.space150` | `12dp` | — |
| Other | `md.comp.search-view.container.surface-tint-layer.color` (deprecated) | Color | `md.sys.color.surface-tint` → `md.sys.color.primary` → `md.ref.palette.primary40` | `#6750A4` | Dark: `#D0BCFF` via `md.ref.palette.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High contrast: `#381E72` via `md.ref.palette.primary20` |
:::

## Anatomy

Search includes a search bar and a container for suggestions and results. The container is empty by default. Use the [list](../lists/overview.md "Lists are continuous, vertical indexes of text and images.") component to add content. In the divided (baseline) style, a divider separates the search bar and results.

![6 elements of search.](/assets/66fa44e0-mm17eoxh-08-3p.Du87sxOG.webp)

1. Search bar container
2. Leading icon
3. Supporting text
4. Trailing icon and avatar (optional)
5. Input text
6. Container for search suggestions or results

### Examples

1. With avatar
2. With one trailing [icon button](../icon-buttons/overview.md "Icon buttons help people take minor actions with one tap.")
3. With two trailing icon buttons
4. With trailing icon button and avatar

![4 search bars with different trailing elements.](/assets/650304d8-mm17exdj-10-3p.DUsPhrUJ.webp)

## Color

Color values are implemented through [design tokens](../../foundations/design-tokens/overview.md "Design tokens are the building blocks of all UI elements. The same tokens are used in designs, tools, and code."). For designers, this means working with color values that correspond with tokens. In implementation, a color value will be a token that references a value.

### Full-screen layout

![6 full-screen search color roles in light and dark themes.](/assets/afb06b8c-mm17f6n2-12-3p.Q2FHZBHK.webp)

Full-screen search color roles used in light and dark themes:

1. Surface container low
2. On surface variant
3. On surface variant
4. Surface container high
5. On surface variant
6. On surface

### Docked layout

![6 docked search color roles in light and dark themes.](/assets/a74a6029-mm17g3kb-13.CsU_qdLT.webp)

Docked search color roles used in light and dark themes:

1. Surface container high
2. On surface variant
3. On surface variant
4. Surface container high
5. On surface variant
6. On surface

<a id="65c58b10-4569-43d6-9c11-64a5b02f3099"></a>

## States

States are visual representations used to communicate the status of a component or an interactive element. In [focused search](guidelines.md#a9b2df31-8561-4326-82cd-41ed6532b765), individual elements maintain their own interaction states. [Learn more about interaction states](../../foundations/interaction/states/overview.md)

### Search bar

![4 search bar states in light and dark mode.](/assets/f8f4bc4f-mm17mvvh-14-3p.kwRFPSyy.webp)

1. Enabled
2. Hovered
3. Focused
4. Pressed (ripple)

### Search suggestions & results

Search includes a container for suggestions and results. The container is empty by default. Use the list component to add content.

![4 search result states in light and dark mode.](/assets/968f050f-mm17n640-15-3p.BUJKwIPe.webp)

1. Enabled
2. Hovered
3. Focused
4. Pressed (ripple)

## Measurements

### Search bar

![Search bar with leading and trailing icon size and padding measurements.](/assets/0e873396-mm17ne69-16.j21RfPMg.webp)

Unfocused search bar with leading and trailing icon measurements

![Search bar with trailing avatar size and padding measurements.](/assets/1242d0bf-mm17njuh-17.BtU_QT_s.webp)

Unfocused search bar with avatar measurements

In M3 Expressive, the search bar expands when focused. The margins change from 24dp to 12dp.

![Unfocused search bar margins of 24dp.](/assets/09c41b9c-mm17o030-18.BO-Oihih.webp)

Unfocused search bar margin measurements

![Focused search bar margins of 12dp.](/assets/11810477-mm17o810-19.qk2kIl97.webp)

Focused search bar margin measurements

|  Element  |                     Attribute                     |              Value             |
| :-------: | :-----------------------------------------------: | :----------------------------: |
| Container |                       Width                       |     Min: 360dp, max: 720dp     |
| Container |                       Height                      |              56dp              |
| Container |                  Label alignment                  |          Start-aligned         |
| Container |                  Leading padding                  | Unfocused: 24dp, focused: 12dp |
| Container |                  Trailing padding                 | Unfocused: 24dp, focused: 12dp |
| Container |  Leading icon and label padding (from tap target) |               4dp              |
| Container | Label and trailing icon padding (from tap target) |               4dp              |
|   Avatar  |                        Size                       |              30dp              |

### Focused search

#### Contained style

![Full-screen layout size and padding measurements in contained style.](/assets/7ef660a7-mm17on8b-20.CXr1Qqmi.webp)

Full-screen search padding and size measurements for contained style

![Docked layout size and padding measurements in contained style.](/assets/aa35699d-mm17oub1-21.DpiEyNBa.webp)

Docked search padding and size measurements for contained style

| Element               | Attribute                                        | Value                                 |
| --------------------- | ------------------------------------------------ | ------------------------------------- |
| Full-screen container | Width                                            | Full width                            |
| Full-screen container | Height                                           | Full height                           |
| Docked container      | Width                                            | Min: 360dp, max: 720dp                |
| Docked container      | Height                                           | Min: 240dp, max: 2/3 of screen height |
| Search bar container  | Height                                           | 56dp                                  |
| Search bar container  | Label alignment                                  | Start-aligned                         |
| Search bar container  | Leading padding                                  | 16dp                                  |
| Search bar container  | Trailing padding                                 | 16dp                                  |
| Search bar container  | Leading icon and label padding (from tap target) | 4dp                                   |
| Search bar container  | Leading icon and label padding (from tap target) | 4dp                                   |

#### Divided style

![Full-screen layout size and padding measurements in divided style.](/assets/7e17c62a-mm17p24v-22-3p.CaWy9T5F.webp)

Full-screen search padding and size measurements for divided style

![Docked layout size and padding measurements in divided style.](/assets/1fdd2e40-mm17p7ru-23-3p.kvYnGo56.webp)

Docked search padding and size measurements for divided style