Skip to content
M3 Expressive

Selection

Checkboxes, radio buttons, switches, the Expressive slider and chips. Every control is live: toggle, drag, press and hold, or tab through with the keyboard.

Checkbox

Unselected, selected and indeterminate. The check draws in on the default-spatial spring and snaps away 100ms after unchecking. The pressed state layer previews the next state.

mixed
States Box 18dp · corner 2dp · outline 2dp · state layer 40dp · target 48dp
Error & disabled Error: error / on-error · disabled: on-surface 38%
Parent & children Label on-surface · parent indeterminate when some are selected

Check, then uncheck to see the error.

Validation aria-invalid on the control, data-invalid on the field
EnabledHoverFocusPressedDisabled Unselected
Selected
Indeterminate
Error
Error, selected
States Hover 8% · focus 10% + 3dp secondary ring · pressed 10% (the layer previews the next state) · disabled 38%

Radio button

The 10dp dot grows on the fast-spatial spring (expressive overshoot); the ring color follows default-effects. Arrow keys move the selection.

Delivery
standard
Radio group Ring 20dp · stroke 2dp · dot 10dp · state layer 40dp · target 48dp
size: m
Horizontal & disabled Unselected on-surface-variant · selected primary · disabled 38%
EnabledHoverFocusPressedDisabled Unselected
Selected
States Unselected on-surface-variant → on-surface on hover / focus / press · selected primary · disabled 38%

Switch

Press and hold: the handle snaps to 28dp. Release: size and position spring together on fast-spatial (ζ 0.6, k 800).

off / on
Without icons Track 52×32dp · outline 2dp · handle 16 → 24dp selected → 28dp pressed · centers 16 / 36dp
With icons Handle 24dp with icon · icons 16dp (check / close)
Disabled Track on-surface 12% · handle surface / on-surface 38%
Settings Label on-surface · body-large
EnabledHoverFocusPressedDisabled Off
On
Off, icons
On, icons
States Handle outline → on-surface-variant (off), on-primary → primary-container (on) · pressed handle 28dp

Slider

The Expressive slider: a 4dp handle with a 6dp gap on each side splits the track into active and inactive segments. The handle narrows to 2dp while pressed, dragged or focused.

xs 30
sm 45
md 60
lg 72
xl 85
Sizes Track 16 / 24 / 40 / 56 / 96dp · handle 44 / 44 / 52 / 68 / 108dp · outer corner 8 / 8 / 12 / 16 / 28dp · inner corner 2dp
42
Continuous with value indicator Value indicator 48×44dp · 12dp above the handle · inverse-surface · label-large
40
Discrete (stops) step 10 · stop indicators 4dp · snaps to the closest stop
20–70
Range Two handles · inactive | active | inactive · stops at both ends
2–7
Range, discrete, size S min 0 · max 10 · step 1
+15
Centered Active track grows from the center · −50…50
+20
Centered, discrete, size M step 10 · handle 52dp
21.5°C
Fractional step step 0.5 · custom format
Disabled Active on-surface 38% · inactive on-surface 12%
30
25–60
Right-to-left dir=rtl inherited · starts on the right · arrows follow the reading direction
60
35
80
range
Vertical orientation vertical · start at the bottom · value indicator beside the handle
EnabledFocusPressedDisabled Standard
States No state layer: the handle narrows 4 → 2dp on focus / press · value indicator 12dp above

Chips

Assist, filter, input and suggestion chips. Flat chips have a 1dp outline; elevated chips sit on surface-container-low at level 1 (shown here on surface-container-lowest so they stay visible in dark mode).

Link chip
last: —
Assist 32dp · corner 8dp · padding 16dp (8dp icon side) · icon 18dp primary
Suggestion Label on-surface-variant · flat or elevated
Thai, Japanese
Filter chip set Selected: secondary-container, no outline · checkmark slot expands on fast-spatial
Filter states Unselected · selected · elevated · icon · trailing icon · disabled
sort: Relevance
Single-select filter One filter chip selected at a time
Expressive shape morph morph: corner 12dp → full when selected → 8dp pressed (fast-spatial)
Input chips with avatar Avatar 24dp · 4dp start, 8dp after avatar · remove 18dp (48dp target) · Backspace removes
Input chips Leading icon on-surface-variant (primary on hover) · selected · disabled
Scrolling chip set ChipSet scroll · gap 8dp · single line
EnabledHoverFocusPressedDisabled Assist
Assist, elevated
Filter
Filter, selected
Filter, elevated
Input
States Hover 8% · focus 10% (flat outline → on-surface-variant) · pressed 10% · elevated L1 → L2 on hover · disabled 38% / 12%