---
url: /components/checkbox/specs.md
description: >-
  Checkboxes allow users to select one or more items from a set. Checkboxes can
  turn an option on or off.
---

# Checkbox

Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

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

## Tokens & specs

Browse the component elements, attributes, tokens, and their values.

::: token-table token-table-31f16b44fe03b0c0-08d5957b
**Checkbox tokens** · 1 token set · 81 tokens · [live token table](https://m3.material.io/components/checkbox/specs) · DSDB `TOKEN_TABLE.31f16b44fe03b0c0`

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

**Checkbox** · `md.comp.checkbox` · 81 tokens

For checkboxes.

| Group | Token | Type | Reference chain | Resolved value | Other contexts |
| --- | --- | --- | --- | --- | --- |
| Enabled › Container | `md.comp.checkbox.container.width` (deprecated) | Length | — | `18dp` | — |
| Enabled › Container | `md.comp.checkbox.container.height` (deprecated) | Length | — | `18dp` | — |
| Enabled › Container | `md.comp.checkbox.container.size` | Length | — | `18dp` | — |
| Enabled › Container | `md.comp.checkbox.container.shape` | Shape | — | `Rounded corners 2dp` | — |
| Enabled › Container | `md.comp.checkbox.unselected.outline.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 › Container | `md.comp.checkbox.unselected.outline.width` | Length | — | `2dp` | — |
| Enabled › Container | `md.comp.checkbox.selected.container.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 › Container | `md.comp.checkbox.selected.outline.width` | Length | — | `0dp` | — |
| Enabled › Container | `md.comp.checkbox.unselected.error.outline.color` | Color | `md.sys.color.error` → `md.ref.palette.error40` | `#B3261E` | Dark: `#F2B8B5` via `md.ref.palette.error80`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>High contrast: `#601410` via `md.ref.palette.error20` |
| Enabled › Container | `md.comp.checkbox.selected.error.container.color` | Color | `md.sys.color.error` → `md.ref.palette.error40` | `#B3261E` | Dark: `#F2B8B5` via `md.ref.palette.error80`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>High contrast: `#601410` via `md.ref.palette.error20` |
| Enabled › Icon | `md.comp.checkbox.icon.size` | Length | — | `18dp` | — |
| Enabled › Icon | `md.comp.checkbox.selected.icon.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Enabled › Icon | `md.comp.checkbox.selected.error.icon.color` | Color | `md.sys.color.on-error` → `md.ref.palette.error100` | `#FFFFFF` | Dark: `#601410` via `md.ref.palette.error20` |
| Enabled › Icon | `md.comp.checkbox.unselected.icon.color` (deprecated) | 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` |
| Enabled › State layer | `md.comp.checkbox.state-layer.size` | Length | — | `40dp` | — |
| Enabled › State layer | `md.comp.checkbox.state-layer.shape` | Shape | `md.sys.shape.corner.full` | `Circular (fully rounded)` | — |
| Disabled › Container | `md.comp.checkbox.unselected.disabled.outline.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 › Container | `md.comp.checkbox.unselected.disabled.outline.width` | Length | — | `2dp` | — |
| Disabled › Container | `md.comp.checkbox.unselected.disabled.container.opacity` | Opacity | — | `0.38` | — |
| Disabled › Container | `md.comp.checkbox.selected.disabled.container.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 › Container | `md.comp.checkbox.selected.disabled.container.opacity` | Opacity | — | `0.38` | — |
| Disabled › Container | `md.comp.checkbox.selected.disabled.container.outline.width` | Length | — | `0dp` | — |
| Disabled › Icon | `md.comp.checkbox.selected.disabled.icon.color` | Color | `md.sys.color.surface` → `md.ref.palette.neutral98` | `#FEF7FF` | Dark: `#141218` via `md.ref.palette.neutral6` |
| Disabled › Icon | `md.comp.checkbox.disabled.selected.icon.color` (deprecated) | 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` |
| Disabled › Icon | `md.comp.checkbox.disabled.selected.icon.opacity` (deprecated) | Opacity | — | `0.38` | — |
| Disabled › Icon | `md.comp.checkbox.disabled.unselected.icon.color` (deprecated) | 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` |
| Disabled › Icon | `md.comp.checkbox.disabled.unselected.icon.opacity` (deprecated) | Opacity | — | `0.38` | — |
| Hovered › Container | `md.comp.checkbox.unselected.hover.outline.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 › Container | `md.comp.checkbox.unselected.hover.outline.width` | Length | — | `2dp` | — |
| Hovered › Container | `md.comp.checkbox.selected.hover.container.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 › Container | `md.comp.checkbox.selected.hover.outline.width` | Length | — | `0dp` | — |
| Hovered › Container | `md.comp.checkbox.unselected.error.hover.outline.color` | Color | `md.sys.color.error` → `md.ref.palette.error40` | `#B3261E` | Dark: `#F2B8B5` via `md.ref.palette.error80`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>High contrast: `#601410` via `md.ref.palette.error20` |
| Hovered › Container | `md.comp.checkbox.unselected.error.hover.outline.width` (deprecated) | Length | — | `2dp` | — |
| Hovered › Container | `md.comp.checkbox.selected.error.hover.container.color` | Color | `md.sys.color.error` → `md.ref.palette.error40` | `#B3261E` | Dark: `#F2B8B5` via `md.ref.palette.error80`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>High contrast: `#601410` via `md.ref.palette.error20` |
| Hovered › Container | `md.comp.checkbox.selected.error.hover.outline.width` (deprecated) | Length | — | `0dp` | — |
| Hovered › State layer | `md.comp.checkbox.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.checkbox.selected.hover.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Hovered › State layer | `md.comp.checkbox.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.checkbox.unselected.hover.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Hovered › State layer | `md.comp.checkbox.error.hover.state-layer.color` | Color | `md.sys.color.error` → `md.ref.palette.error40` | `#B3261E` | Dark: `#F2B8B5` via `md.ref.palette.error80`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>High contrast: `#601410` via `md.ref.palette.error20` |
| Hovered › State layer | `md.comp.checkbox.error.hover.state-layer.opacity` | Opacity | `md.sys.state.hover.state-layer-opacity` | `0.08` | — |
| Hovered › Icon | `md.comp.checkbox.selected.hover.icon.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Hovered › Icon | `md.comp.checkbox.selected.error.hover.icon.color` | Color | `md.sys.color.on-error` → `md.ref.palette.error100` | `#FFFFFF` | Dark: `#601410` via `md.ref.palette.error20` |
| Hovered › Icon | `md.comp.checkbox.unselected.hover.icon.color` (deprecated) | 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 › Container | `md.comp.checkbox.unselected.focus.outline.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 › Container | `md.comp.checkbox.unselected.focus.outline.width` | Length | — | `2dp` | — |
| Focused › Container | `md.comp.checkbox.selected.focus.container.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 › Container | `md.comp.checkbox.selected.focus.outline.width` | Length | — | `0dp` | — |
| Focused › Container | `md.comp.checkbox.unselected.error.focus.outline.color` | Color | `md.sys.color.error` → `md.ref.palette.error40` | `#B3261E` | Dark: `#F2B8B5` via `md.ref.palette.error80`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>High contrast: `#601410` via `md.ref.palette.error20` |
| Focused › Container | `md.comp.checkbox.unselected.error.focus.outline.width` (deprecated) | Length | — | `2dp` | — |
| Focused › Container | `md.comp.checkbox.selected.error.focus.container.color` | Color | `md.sys.color.error` → `md.ref.palette.error40` | `#B3261E` | Dark: `#F2B8B5` via `md.ref.palette.error80`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>High contrast: `#601410` via `md.ref.palette.error20` |
| Focused › Container | `md.comp.checkbox.selected.error.focus.outline.width` (deprecated) | Length | — | `0dp` | — |
| Focused › State layer | `md.comp.checkbox.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.checkbox.selected.focus.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Focused › State layer | `md.comp.checkbox.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.checkbox.unselected.focus.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Focused › State layer | `md.comp.checkbox.error.focus.state-layer.color` | Color | `md.sys.color.error` → `md.ref.palette.error40` | `#B3261E` | Dark: `#F2B8B5` via `md.ref.palette.error80`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>High contrast: `#601410` via `md.ref.palette.error20` |
| Focused › State layer | `md.comp.checkbox.error.focus.state-layer.opacity` | Opacity | `md.sys.state.focus.state-layer-opacity` | `0.1` | — |
| Focused › Icon | `md.comp.checkbox.selected.focus.icon.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Focused › Icon | `md.comp.checkbox.selected.error.focus.icon.color` | Color | `md.sys.color.on-error` → `md.ref.palette.error100` | `#FFFFFF` | Dark: `#601410` via `md.ref.palette.error20` |
| Focused › Icon | `md.comp.checkbox.unselected.focus.icon.color` (deprecated) | 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 › Focus indicator | `md.comp.checkbox.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` |
| Focused › Focus indicator | `md.comp.checkbox.focus.indicator.thickness` | Length | `md.sys.state.focus-indicator.thickness` | `3dp` | — |
| Focused › Focus indicator | `md.comp.checkbox.focus.indicator.outline.offset` | Length | `md.sys.state.focus-indicator.outer-offset` | `2dp` | — |
| Pressed (ripple) › Container | `md.comp.checkbox.unselected.pressed.outline.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) › Container | `md.comp.checkbox.unselected.pressed.outline.width` | Length | — | `2dp` | — |
| Pressed (ripple) › Container | `md.comp.checkbox.selected.pressed.container.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) › Container | `md.comp.checkbox.selected.pressed.outline.width` | Length | — | `0dp` | — |
| Pressed (ripple) › Container | `md.comp.checkbox.unselected.error.pressed.outline.color` | Color | `md.sys.color.error` → `md.ref.palette.error40` | `#B3261E` | Dark: `#F2B8B5` via `md.ref.palette.error80`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>High contrast: `#601410` via `md.ref.palette.error20` |
| Pressed (ripple) › Container | `md.comp.checkbox.unselected.error.pressed.outline.width` (deprecated) | Length | — | `2dp` | — |
| Pressed (ripple) › Container | `md.comp.checkbox.selected.error.pressed.container.color` | Color | `md.sys.color.error` → `md.ref.palette.error40` | `#B3261E` | Dark: `#F2B8B5` via `md.ref.palette.error80`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>High contrast: `#601410` via `md.ref.palette.error20` |
| Pressed (ripple) › Container | `md.comp.checkbox.selected.error.pressed.outline.width` (deprecated) | Length | — | `0dp` | — |
| Pressed (ripple) › State layer | `md.comp.checkbox.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.checkbox.unselected.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Pressed (ripple) › State layer | `md.comp.checkbox.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.checkbox.selected.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Pressed (ripple) › State layer | `md.comp.checkbox.error.pressed.state-layer.color` | Color | `md.sys.color.error` → `md.ref.palette.error40` | `#B3261E` | Dark: `#F2B8B5` via `md.ref.palette.error80`<br>Medium contrast: `#8C1D18` via `md.ref.palette.error30`<br>High contrast: `#601410` via `md.ref.palette.error20` |
| Pressed (ripple) › State layer | `md.comp.checkbox.error.pressed.state-layer.opacity` | Opacity | `md.sys.state.pressed.state-layer-opacity` | `0.1` | — |
| Pressed (ripple) › Icon | `md.comp.checkbox.selected.pressed.icon.color` | Color | `md.sys.color.on-primary` → `md.ref.palette.primary100` | `#FFFFFF` | Dark: `#381E72` via `md.ref.palette.primary20` |
| Pressed (ripple) › Icon | `md.comp.checkbox.selected.error.pressed.icon.color` | Color | `md.sys.color.on-error` → `md.ref.palette.error100` | `#FFFFFF` | Dark: `#601410` via `md.ref.palette.error20` |
| Pressed (ripple) › Icon | `md.comp.checkbox.unselected.pressed.icon.color` (deprecated) | 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` |
:::

## Checkbox

![Diagram of checkbox indicating the 2 parts of its anatomy.](/assets/a371e633-memmstmc-1-3p.BGJkwCq9.webp)

1. Container 
2. Icon

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

![Checkbox color roles in light and dark themes.](/assets/bc1fb1e2-memmtsu5-2-3p.BS3mX6k7.webp)

1. Checkbox
2. State-layer
3. Icon

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

![Checkboxes with text labels. The text color is the same for checked and unchecked checkboxes.](/assets/6a5e11ad-memmvnkr-3-3p.xte33iAp.webp)

The text color remains the same regardless if the checkbox 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](../../foundations/interaction/states/overview.md)

![Side by side view of states in light and dark themes.](/assets/6be82804-memmxoan-4-3p.Dij0lRmN.webp)

1. Enabled 
2. Disabled 
3. Hovered 
4. Focused 
5. Pressed

## Measurements

![Diagram of a selected checkbox with a container width and height of 18dp and a state-layer width and height of 40dp.](/assets/7fa0575f-memn204f-5-3p.CD0z068u.webp)

|        Attribute       |      Value     |
| :--------------------: | :------------: |
|     Container size     |      18dp      |
| Container corner shape |       2dp      |
|        Icon size       |      18dp      |
|     Icon alignment     | Center-aligned |
|       Target size      |      48dp      |
|    State-layer size    |      40dp      |