Inputs · M3 Expressive

Text fields

Filled and outlined. The label floats from body-large to body-small on a fast-spatial spring; the indicator or outline thickens from 1dp to 2dp in primary on focus.

Empty

With value

Placeholder on focus

The placeholder only shows while focused

Error

Enter a valid email address

Disabled

Filled Height 56dp · Top corners 4dp · Indicator 1dp → 2dp · Padding 16dp · Label 16/24 → 12/16

Empty

With value

Placeholder on focus

The placeholder only shows while focused

Error

Enter a valid email address

Disabled

Outlined Height 56dp · Corner 4dp · Outline 1dp → 2dp · Label notch 4dp each side

Search

Password

Email

Missing domain

Icons Icons 24dp · Trailing icon button 48dp target · Icon side padding 12dp · Icon ↔ text 16dp

Amount $ USD

Weight kg

Website https://

Prefix & suffix Prefix/suffix body-large on-surface-variant · 2dp gap · shown once the label floats

Bio

Tell people a little about yourself 0 / 80

Username

Usernames are 20 characters or fewer 28 / 20

Supporting text & counter Supporting text body-small 12/16 · 4dp top · 16dp sides · Counter end-aligned, 16dp gap

Notes

Message

0 / 200

Account ID (read-only)

Multi-line & read-only Grows with content from 56dp · Read-only looks enabled, is labelled as such

EnabledPopulatedErrorDisabledRead-only filled

Name

Supporting text

Name

Supporting text

Name

Error text

Name

Supporting text

Name

Supporting text

outlined

Name

Supporting text

Name

Supporting text

Name

Error text

Name

Supporting text

Name

Supporting text

States Hover and focus are live · Error: label, indicator, supporting text and trailing icon in error · Disabled: content on-surface 38%, filled container on-surface 4%, outline on-surface 12%

A small form Field.FieldSet / FieldGroup layout · error replaces supporting text · select = outlined field

Search

The search bar is a 56dp pill on surface-container-high. Focusing it expands the bar by shrinking its 24dp side margins to 12dp. The search view shows suggestions docked below the bar on large screens and full screen on compact ones.

Submitted: —

Search bar Height 56dp · Corner full · surface-container-high · Level 3 · Margins 24dp → 12dp on focus · Icons 24dp in 48dp targets · Avatar 30dp

Search components

Submitted: —

Search view · docked Results corner 12dp · 2dp below the bar · Min 240dp, max 2/3 screen · Level 3 · List items 56/72dp · ↑ ↓ Enter Esc

Submitted: —

Search view · full screen Grows out of the bar (container transform) · surface-container-low · 56dp bar, 12dp margins · Expand 600ms emphasized-decelerate · Collapse 350ms · Results fade 100ms after 50ms · Used automatically below 600dp

Menus

Built on bits-ui DropdownMenu, so keyboard navigation, typeahead and submenus come for free. Menus open from their anchor with a 0.8 → 1 scale on the fast-spatial spring and a fast-effects fade.

Last action: — · Ruler on · Grid off · comfortable

Baseline menu Width 112–280dp · Corner 4dp · surface-container · Level 2 · 8dp list padding · Items 48dp, 12dp padding · Icons 24dp · Divider 1dp, 8dp padding

Expressive vertical menu (standard) Corner 16dp (24dp while a submenu is open) · Items 44dp · Padding 16dp · Icons 20dp · Groups 2dp gap · Selected tertiary-container 12dp

Expressive vertical menu (vibrant) Container tertiary-container · Selected tertiary / on-tertiary · Level 2

Expressive menu without groups Single 16dp container · 4dp padding · First/last item 12dp outer corners

Select

The shadcn Select restyled: the trigger is an outlined text field and the listbox is a baseline M3 menu.

Select Trigger 56dp, outline 1dp → 2dp primary · Floating label + notch · Arrow 24dp rotates on open · Menu items 48dp · Selected secondary-container

Date picker

Docked date picker on bits-ui DatePicker: type into the date segments or open the calendar from the trailing icon.

Birthday

mmddyyyy

MM/DD/YYYY

Departure

10112026

Today or later

Disabled

mmddyyyy

MM/DD/YYYY

Birthday: — · Departure: 2026-10-11

Docked date picker Card 360 × 456dp · Corner 16dp · surface-container-high · Level 3 · Header 64dp · Day cells 48dp, 40dp indicator · Selected primary · Today 1dp primary outline