Component

Material Design 3 checkbox tokens

Browse tokens

Token

See more values

Compare token values by selecting another context

Theme
Contrast
More contexts
Platform
Audience
What do 1P and 3P mean?

1P means first-party; 3P means third-party. We interpret 1P Baseline as the configuration for Google's own products, and 3P as the configuration for other developers.

Material supplies these audience labels but does not define them in the captured data. They are not a baseline-versus-Expressive switch.

Enabled
Container
Container tokens
TokenValue
Checkbox container widthmd.comp.checkbox.container.width
18dp
Checkbox container heightmd.comp.checkbox.container.height
18dp
Checkbox container sizemd.comp.checkbox.container.size
18dp
Checkbox container shapemd.comp.checkbox.container.shape
2dp
Checkbox unselected outline colormd.comp.checkbox.unselected.outline.color
#49454F
Checkbox unselected outline widthmd.comp.checkbox.unselected.outline.width
2dp
Checkbox selected container colormd.comp.checkbox.selected.container.color
#6750A4
Checkbox selected outline widthmd.comp.checkbox.selected.outline.width
0dp
Checkbox unselected error outline colormd.comp.checkbox.unselected.error.outline.color
#B3261E
Checkbox selected error container colormd.comp.checkbox.selected.error.container.color
#B3261E
Icon
Icon tokens
TokenValue
Checkbox icon sizemd.comp.checkbox.icon.size
18dp
Checkbox selected icon colormd.comp.checkbox.selected.icon.color
#FFFFFF
Checkbox selected error icon colormd.comp.checkbox.selected.error.icon.color
#FFFFFF
Checkbox unselected icon colormd.comp.checkbox.unselected.icon.color
#1D1B20
State layer
State layer tokens
TokenValue
Checkbox state layer sizemd.comp.checkbox.state-layer.size
40dp
Checkbox state layer shapemd.comp.checkbox.state-layer.shape
Full
Disabled
Container
Container tokens
TokenValue
Checkbox unselected disabled outline colormd.comp.checkbox.unselected.disabled.outline.color
#1D1B20
Checkbox unselected disabled outline widthmd.comp.checkbox.unselected.disabled.outline.width
2dp
Checkbox unselected disabled container opacitymd.comp.checkbox.unselected.disabled.container.opacity
38%
Checkbox selected disabled container colormd.comp.checkbox.selected.disabled.container.color
#1D1B20
Checkbox selected disabled container opacitymd.comp.checkbox.selected.disabled.container.opacity
38%
Checkbox selected disabled container outline widthmd.comp.checkbox.selected.disabled.container.outline.width
0dp
Icon
Icon tokens
TokenValue
Checkbox selected disabled icon colormd.comp.checkbox.selected.disabled.icon.color
#FEF7FF
Checkbox disabled selected icon colormd.comp.checkbox.disabled.selected.icon.color
#6750A4
Checkbox disabled selected icon opacitymd.comp.checkbox.disabled.selected.icon.opacity
38%
Checkbox disabled unselected icon colormd.comp.checkbox.disabled.unselected.icon.color
#6750A4
Checkbox disabled unselected icon opacitymd.comp.checkbox.disabled.unselected.icon.opacity
38%
Hovered
Container
Container tokens
TokenValue
Checkbox unselected hover outline colormd.comp.checkbox.unselected.hover.outline.color
#1D1B20
Checkbox unselected hover outline widthmd.comp.checkbox.unselected.hover.outline.width
2dp
Checkbox selected hover container colormd.comp.checkbox.selected.hover.container.color
#6750A4
Checkbox selected hover outline widthmd.comp.checkbox.selected.hover.outline.width
0dp
Checkbox unselected error hover outline colormd.comp.checkbox.unselected.error.hover.outline.color
#B3261E
Checkbox unselected error hover outline widthmd.comp.checkbox.unselected.error.hover.outline.width
2dp
Checkbox selected error hover container colormd.comp.checkbox.selected.error.hover.container.color
#B3261E
Checkbox selected error hover outline widthmd.comp.checkbox.selected.error.hover.outline.width
0dp
State layer
State layer tokens
TokenValue
Checkbox selected hover state layer colormd.comp.checkbox.selected.hover.state-layer.color
#6750A4
Checkbox selected hover state layer opacitymd.comp.checkbox.selected.hover.state-layer.opacity
8%
Checkbox unselected hover state layer colormd.comp.checkbox.unselected.hover.state-layer.color
#1D1B20
Checkbox unselected hover state layer opacitymd.comp.checkbox.unselected.hover.state-layer.opacity
8%
Checkbox error hover state layer colormd.comp.checkbox.error.hover.state-layer.color
#B3261E
Checkbox error hover state layer opacitymd.comp.checkbox.error.hover.state-layer.opacity
8%
Icon
Icon tokens
TokenValue
Checkbox selected hover icon colormd.comp.checkbox.selected.hover.icon.color
#FFFFFF
Checkbox selected error hover icon colormd.comp.checkbox.selected.error.hover.icon.color
#FFFFFF
Checkbox unselected hover icon colormd.comp.checkbox.unselected.hover.icon.color
#1D1B20
Focused
Focus indicator
Focus indicator tokens
TokenValue
Checkbox focus indicator colormd.comp.checkbox.focus.indicator.color
#625B71
Checkbox focus indicator thicknessmd.comp.checkbox.focus.indicator.thickness
3dp
Checkbox focus indicator offsetmd.comp.checkbox.focus.indicator.outline.offset
2dp
Container
Container tokens
TokenValue
Checkbox unselected focus outline colormd.comp.checkbox.unselected.focus.outline.color
#1D1B20
Checkbox unselected focus outline widthmd.comp.checkbox.unselected.focus.outline.width
2dp
Checkbox selected focus container colormd.comp.checkbox.selected.focus.container.color
#6750A4
Checkbox selected focus outline widthmd.comp.checkbox.selected.focus.outline.width
0dp
Checkbox unselected error focus outline colormd.comp.checkbox.unselected.error.focus.outline.color
#B3261E
Checkbox unselected error focusd outline widthmd.comp.checkbox.unselected.error.focus.outline.width
2dp
Checkbox selected error focus container colormd.comp.checkbox.selected.error.focus.container.color
#B3261E
Checkbox selected error focus outline widthmd.comp.checkbox.selected.error.focus.outline.width
0dp
State layer
State layer tokens
TokenValue
Checkbox error focus state layer opacitymd.comp.checkbox.error.focus.state-layer.opacity
10%
Checkbox selected focus state layer colormd.comp.checkbox.selected.focus.state-layer.color
#6750A4
Checkbox selected focus state layer opacitymd.comp.checkbox.selected.focus.state-layer.opacity
10%
Checkbox unselected focus state layer colormd.comp.checkbox.unselected.focus.state-layer.color
#1D1B20
Checkbox unselected focus state layer opacitymd.comp.checkbox.unselected.focus.state-layer.opacity
10%
Checkbox error focus state layer colormd.comp.checkbox.error.focus.state-layer.color
#B3261E
Icon
Icon tokens
TokenValue
Checkbox selected focus icon colormd.comp.checkbox.selected.focus.icon.color
#FFFFFF
Checkbox selected error focus icon colormd.comp.checkbox.selected.error.focus.icon.color
#FFFFFF
Checkbox unselected focus icon colormd.comp.checkbox.unselected.focus.icon.color
#1D1B20
Pressed (ripple)
Container
Container tokens
TokenValue
Checkbox unselected pressed outline colormd.comp.checkbox.unselected.pressed.outline.color
#1D1B20
Checkbox unselected pressed outline widthmd.comp.checkbox.unselected.pressed.outline.width
2dp
Checkbox selected pressed container colormd.comp.checkbox.selected.pressed.container.color
#6750A4
Checkbox selected pressed outline widthmd.comp.checkbox.selected.pressed.outline.width
0dp
Checkbox unselected error pressed outline colormd.comp.checkbox.unselected.error.pressed.outline.color
#B3261E
Checkbox unselected error pressed outline widthmd.comp.checkbox.unselected.error.pressed.outline.width
2dp
Checkbox selected error pressed container colormd.comp.checkbox.selected.error.pressed.container.color
#B3261E
Checkbox selected error pressed outline widthmd.comp.checkbox.selected.error.pressed.outline.width
0dp
State layer
State layer tokens
TokenValue
Checkbox unselected pressed state layer colormd.comp.checkbox.unselected.pressed.state-layer.color
#6750A4
Checkbox unselected pressed state layer opacitymd.comp.checkbox.unselected.pressed.state-layer.opacity
10%
Checkbox selected pressed state layer colormd.comp.checkbox.selected.pressed.state-layer.color
#1D1B20
Checkbox selected pressed state layer opacitymd.comp.checkbox.selected.pressed.state-layer.opacity
10%
Checkbox error pressed state layer colormd.comp.checkbox.error.pressed.state-layer.color
#B3261E
Checkbox error pressed state layer opacitymd.comp.checkbox.error.pressed.state-layer.opacity
10%
Icon
Icon tokens
TokenValue
Checkbox selected pressed icon colormd.comp.checkbox.selected.pressed.icon.color
#FFFFFF
Checkbox selected error pressed icon colormd.comp.checkbox.selected.error.pressed.icon.color
#FFFFFF
Checkbox unselected pressed icon colormd.comp.checkbox.unselected.pressed.icon.color
#1D1B20