---
url: /components/radio-button/specs.md
description: Radio buttons allow users to select one option from a set.
---

# Radio button

Radio buttons allow users to select one option from a set.

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

![Diagram of enabled radio button.](/assets/835f5d2b-md8jp5v6-01-3p.rs8ao_oM.webp)

1. Radio button icon

<a id="3eef19a6-cdcb-4ecf-b1af-2b8095d485ac"></a>

## Tokens & specs

[Learn more about design tokens](../../foundations/design-tokens/overview.md)

::: token-table token-table-6acb269a58d5f93f-4f12d0ef
**Radio button tokens** · 1 token set · 26 tokens · [live token table](https://m3.material.io/components/radio-button/specs) · 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.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High 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-variant80`<br>Medium contrast: `#322F37` via `md.ref.palette.neutral-variant20`<br>High 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.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High 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.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High 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.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High 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.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High 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.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High 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.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High 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.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High 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.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High 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.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High 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.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High 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.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High 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.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High 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.primary80`<br>Medium contrast: `#4F378B` via `md.ref.palette.primary30`<br>High 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.neutral90`<br>Medium contrast: `#000000` via `md.ref.palette.neutral0`<br>High contrast: `#000000` via `md.ref.palette.neutral0` |
:::

## 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 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](../../foundations/design-tokens/overview.md)

![Diagram of selected and unselected radio button colors.](/assets/e3ecb928-md8jpn14-02-3p.BKfycdHp.webp)

Radio button color roles used for light and dark themes:

1. Primary
2. On surface variant

<br>

### 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.

![Radio buttons with labels. The labels are the same color for both selected and unselected radio buttons.](/assets/2fac27db-md8jq2c4-03-3p.kFldYx4t.webp)

The text color remains the same regardless if the button is selected or not

## States

[States](../../foundations/interaction/states/overview.md "States show the interaction status of a component or UI element.") are visual representations used to communicate the status of a component or interactive element. [Learn more about interaction states](../../foundations/interaction/states/overview.md)

![Diagram of radio button states including enabled, hover, focus, pressed, and disabled.](/assets/639cad5f-md8jqfvs-04-3p.S64Ky4CC.webp)

1. Enabled 
2. Hover 
3. Focus 
4. Pressed
5. Disabled

[State specs are in the token module above](#3eef19a6-cdcb-4ecf-b1af-2b8095d485ac)

## Measurements

![Diagram of radio button layout values.](/assets/53a7ddd5-md8juo16-05-3p.C2zPB706.webp)

Radio button size measurements

|     Attribute    | Value |
| :--------------: | :---: |
|     Icon size    |  20dp |
| State layer size |  40dp |
|    Target size   |  48dp |