Radio button
Radio buttons allow users to select one option from a set.
Overview · Specs · Guidelines · Accessibility
- Radio button icon
Tokens & specs
Learn more about design tokens
Design tokens
Token table
Machine-readable relationship table
Radio button tokens · 1 token set · 26 tokens · live token table · DSDB TOKEN_TABLE.6acb269a58d5f93f
- Default context: Theme: Light · Platform: Android · Audience: 3P · Contrast: Default · iOS dark theme elevation: None · iOS weight setting: Default
- Not configurable here (group default used): Motion scheme: Standard · Font: Static · Language height: Small
- Other contexts: Theme: Dark · 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.
Radio Button · md.comp.radio-button · 26 tokens
For radio buttons.
| Group | Token | Type | Reference chain | Resolved value | Other contexts |
|---|---|---|---|---|---|
| Enabled › Icon | md.comp.radio-button.selected.icon.color | Color | md.sys.color.primary → md.ref.palette.primary40 | #6750A4 | Dark: #D0BCFF via md.ref.palette.primary80Medium contrast: #4F378B via md.ref.palette.primary30High contrast: #381E72 via md.ref.palette.primary20 |
| Enabled › Icon | md.comp.radio-button.unselected.icon.color | Color | md.sys.color.on-surface-variant → md.ref.palette.neutral-variant30 | #49454F | Dark: #CAC4D0 via md.ref.palette.neutral-variant80Medium contrast: #322F37 via md.ref.palette.neutral-variant20High contrast: #000000 via md.ref.palette.neutral-variant0 |
| Enabled › Icon | md.comp.radio-button.icon.size | Length | — | 20dp | — |
| Enabled › State layer | md.comp.radio-button.state-layer.size | Length | — | 40dp | — |
| Disabled › Icon | md.comp.radio-button.disabled.selected.icon.color | Color | md.sys.color.on-surface → md.ref.palette.neutral10 | #1D1B20 | Dark: #E6E0E9 via md.ref.palette.neutral90Medium contrast: #000000 via md.ref.palette.neutral0High contrast: #000000 via md.ref.palette.neutral0 |
| Disabled › Icon | md.comp.radio-button.disabled.selected.icon.opacity | Opacity | — | 0.38 | — |
| Disabled › Icon | md.comp.radio-button.disabled.unselected.icon.color | Color | md.sys.color.on-surface → md.ref.palette.neutral10 | #1D1B20 | Dark: #E6E0E9 via md.ref.palette.neutral90Medium contrast: #000000 via md.ref.palette.neutral0High contrast: #000000 via md.ref.palette.neutral0 |
| Disabled › Icon | md.comp.radio-button.disabled.unselected.icon.opacity | Opacity | — | 0.38 | — |
| Hovered › State layer | md.comp.radio-button.selected.hover.state-layer.color | Color | md.sys.color.primary → md.ref.palette.primary40 | #6750A4 | Dark: #D0BCFF via md.ref.palette.primary80Medium contrast: #4F378B via md.ref.palette.primary30High contrast: #381E72 via md.ref.palette.primary20 |
| Hovered › State layer | md.comp.radio-button.selected.hover.state-layer.opacity | Opacity | md.sys.state.hover.state-layer-opacity | 0.08 | — |
| Hovered › State layer | md.comp.radio-button.unselected.hover.state-layer.color | Color | md.sys.color.on-surface → md.ref.palette.neutral10 | #1D1B20 | Dark: #E6E0E9 via md.ref.palette.neutral90Medium contrast: #000000 via md.ref.palette.neutral0High contrast: #000000 via md.ref.palette.neutral0 |
| Hovered › State layer | md.comp.radio-button.unselected.hover.state-layer.opacity | Opacity | md.sys.state.hover.state-layer-opacity | 0.08 | — |
| Hovered › Icon | md.comp.radio-button.selected.hover.icon.color | Color | md.sys.color.primary → md.ref.palette.primary40 | #6750A4 | Dark: #D0BCFF via md.ref.palette.primary80Medium contrast: #4F378B via md.ref.palette.primary30High contrast: #381E72 via md.ref.palette.primary20 |
| Hovered › Icon | md.comp.radio-button.unselected.hover.icon.color | Color | md.sys.color.on-surface → md.ref.palette.neutral10 | #1D1B20 | Dark: #E6E0E9 via md.ref.palette.neutral90Medium contrast: #000000 via md.ref.palette.neutral0High contrast: #000000 via md.ref.palette.neutral0 |
| Focused › State layer | md.comp.radio-button.selected.focus.state-layer.color | Color | md.sys.color.primary → md.ref.palette.primary40 | #6750A4 | Dark: #D0BCFF via md.ref.palette.primary80Medium contrast: #4F378B via md.ref.palette.primary30High contrast: #381E72 via md.ref.palette.primary20 |
| Focused › State layer | md.comp.radio-button.selected.focus.state-layer.opacity | Opacity | md.sys.state.focus.state-layer-opacity | 0.1 | — |
| Focused › State layer | md.comp.radio-button.unselected.focus.state-layer.color | Color | md.sys.color.on-surface → md.ref.palette.neutral10 | #1D1B20 | Dark: #E6E0E9 via md.ref.palette.neutral90Medium contrast: #000000 via md.ref.palette.neutral0High contrast: #000000 via md.ref.palette.neutral0 |
| Focused › State layer | md.comp.radio-button.unselected.focus.state-layer.opacity | Opacity | md.sys.state.focus.state-layer-opacity | 0.1 | — |
| Focused › Icon | md.comp.radio-button.selected.focus.icon.color | Color | md.sys.color.primary → md.ref.palette.primary40 | #6750A4 | Dark: #D0BCFF via md.ref.palette.primary80Medium contrast: #4F378B via md.ref.palette.primary30High contrast: #381E72 via md.ref.palette.primary20 |
| Focused › Icon | md.comp.radio-button.unselected.focus.icon.color | Color | md.sys.color.on-surface → md.ref.palette.neutral10 | #1D1B20 | Dark: #E6E0E9 via md.ref.palette.neutral90Medium contrast: #000000 via md.ref.palette.neutral0High contrast: #000000 via md.ref.palette.neutral0 |
| Pressed (ripple) › State layer | md.comp.radio-button.selected.pressed.state-layer.color | Color | md.sys.color.on-surface → md.ref.palette.neutral10 | #1D1B20 | Dark: #E6E0E9 via md.ref.palette.neutral90Medium contrast: #000000 via md.ref.palette.neutral0High contrast: #000000 via md.ref.palette.neutral0 |
| Pressed (ripple) › State layer | md.comp.radio-button.selected.pressed.state-layer.opacity | Opacity | md.sys.state.pressed.state-layer-opacity | 0.1 | — |
| Pressed (ripple) › State layer | md.comp.radio-button.unselected.pressed.state-layer.color | Color | md.sys.color.primary → md.ref.palette.primary40 | #6750A4 | Dark: #D0BCFF via md.ref.palette.primary80Medium contrast: #4F378B via md.ref.palette.primary30High contrast: #381E72 via md.ref.palette.primary20 |
| Pressed (ripple) › State layer | md.comp.radio-button.unselected.pressed.state-layer.opacity | Opacity | md.sys.state.pressed.state-layer-opacity | 0.1 | — |
| Pressed (ripple) › Icon | md.comp.radio-button.selected.pressed.icon.color | Color | md.sys.color.primary → md.ref.palette.primary40 | #6750A4 | Dark: #D0BCFF via md.ref.palette.primary80Medium contrast: #4F378B via md.ref.palette.primary30High contrast: #381E72 via md.ref.palette.primary20 |
| Pressed (ripple) › Icon | md.comp.radio-button.unselected.pressed.icon.color | Color | md.sys.color.on-surface → md.ref.palette.neutral10 | #1D1B20 | Dark: #E6E0E9 via md.ref.palette.neutral90Medium contrast: #000000 via md.ref.palette.neutral0High contrast: #000000 via md.ref.palette.neutral0 |
Color
Color values are implemented through design tokens. For design, this means working with color values that correspond with tokens. For implementation, a color value will be a token that references a value. Learn more about design tokens
Radio button color roles used for light and dark themes:
- Primary
- On surface variant
Adjacent text label color
Use the color role on surface for adjacent text labels. This remains the same even if interacting with the label or component.
The text color remains the same regardless if the button is selected or not
States
States are visual representations used to communicate the status of a component or interactive element. Learn more about interaction states
- Enabled
- Hover
- Focus
- Pressed
- Disabled
State specs are in the token module above
Measurements
Radio button size measurements
| Attribute | Value |
|---|---|
| Icon size | 20dp |
| State layer size | 40dp |
| Target size | 48dp |