Checkbox

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

Overview · Specs · Guidelines · Accessibility

Tokens & specs

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

Design tokens

Token table

Machine-readable relationship table

Checkbox tokens · 1 token set · 81 tokens · live token table · 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 Medium contrast: #322F37 via md.ref.palette.neutral-variant20 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #8C1D18 via md.ref.palette.error30 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 Medium contrast: #8C1D18 via md.ref.palette.error30 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #8C1D18 via md.ref.palette.error30 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 Medium contrast: #8C1D18 via md.ref.palette.error30 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #8C1D18 via md.ref.palette.error30 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #8C1D18 via md.ref.palette.error30 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 Medium contrast: #8C1D18 via md.ref.palette.error30 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #8C1D18 via md.ref.palette.error30 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #4A4458 via md.ref.palette.secondary30 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #8C1D18 via md.ref.palette.error30 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 Medium contrast: #8C1D18 via md.ref.palette.error30 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 Medium contrast: #4F378B via md.ref.palette.primary30 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 Medium contrast: #000000 via md.ref.palette.neutral0 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 Medium contrast: #8C1D18 via md.ref.palette.error30 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 Medium contrast: #000000 via md.ref.palette.neutral0 High contrast: #000000 via md.ref.palette.neutral0

Checkbox

1. Container 
2. Icon

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

1. Checkbox
2. State-layer
3. Icon

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

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

Measurements

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