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
Enabled tokens
TokenValue
Checkbox selected container colormd.comp.checkbox.selected.container.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.checkbox.selected.container.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Checkbox selected error container colormd.comp.checkbox.selected.error.container.color
md.sys.color.errorShow reference chainHide reference chain
md.comp.checkbox.selected.error.container.color
  • md.sys.color.error
    • md.ref.palette.error40
#B3261E
Checkbox selected error icon colormd.comp.checkbox.selected.error.icon.color
md.sys.color.on-errorShow reference chainHide reference chain
md.comp.checkbox.selected.error.icon.color
  • md.sys.color.on-error
    • md.ref.palette.error100
#FFFFFF
Checkbox selected icon colormd.comp.checkbox.selected.icon.color
md.sys.color.on-primaryShow reference chainHide reference chain
md.comp.checkbox.selected.icon.color
  • md.sys.color.on-primary
    • md.ref.palette.primary100
#FFFFFF
Checkbox unselected error outline colormd.comp.checkbox.unselected.error.outline.color
md.sys.color.errorShow reference chainHide reference chain
md.comp.checkbox.unselected.error.outline.color
  • md.sys.color.error
    • md.ref.palette.error40
#B3261E
Checkbox unselected icon colormd.comp.checkbox.unselected.icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.checkbox.unselected.icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Checkbox unselected outline colormd.comp.checkbox.unselected.outline.color
md.sys.color.on-surface-variantShow reference chainHide reference chain
md.comp.checkbox.unselected.outline.color
  • md.sys.color.on-surface-variant
    • md.ref.palette.neutral-variant30
#49454F
Disabled
Disabled tokens
TokenValue
Checkbox disabled selected icon colormd.comp.checkbox.disabled.selected.icon.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.checkbox.disabled.selected.icon.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Checkbox disabled selected icon opacitymd.comp.checkbox.disabled.selected.icon.opacity38%
Checkbox disabled unselected icon colormd.comp.checkbox.disabled.unselected.icon.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.checkbox.disabled.unselected.icon.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Checkbox disabled unselected icon opacitymd.comp.checkbox.disabled.unselected.icon.opacity38%
Checkbox selected disabled container colormd.comp.checkbox.selected.disabled.container.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.checkbox.selected.disabled.container.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Checkbox selected disabled container opacitymd.comp.checkbox.selected.disabled.container.opacity38%
Checkbox selected disabled icon colormd.comp.checkbox.selected.disabled.icon.color
md.sys.color.surfaceShow reference chainHide reference chain
md.comp.checkbox.selected.disabled.icon.color
  • md.sys.color.surface
    • md.ref.palette.neutral98
#FEF7FF
Checkbox unselected disabled container opacitymd.comp.checkbox.unselected.disabled.container.opacity38%
Checkbox unselected disabled outline colormd.comp.checkbox.unselected.disabled.outline.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.checkbox.unselected.disabled.outline.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Hovered
Hovered tokens
TokenValue
Checkbox selected error hover container colormd.comp.checkbox.selected.error.hover.container.color
md.sys.color.errorShow reference chainHide reference chain
md.comp.checkbox.selected.error.hover.container.color
  • md.sys.color.error
    • md.ref.palette.error40
#B3261E
Checkbox selected error hover icon colormd.comp.checkbox.selected.error.hover.icon.color
md.sys.color.on-errorShow reference chainHide reference chain
md.comp.checkbox.selected.error.hover.icon.color
  • md.sys.color.on-error
    • md.ref.palette.error100
#FFFFFF
Checkbox selected hover container colormd.comp.checkbox.selected.hover.container.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.checkbox.selected.hover.container.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Checkbox selected hover icon colormd.comp.checkbox.selected.hover.icon.color
md.sys.color.on-primaryShow reference chainHide reference chain
md.comp.checkbox.selected.hover.icon.color
  • md.sys.color.on-primary
    • md.ref.palette.primary100
#FFFFFF
Checkbox selected hover state layer colormd.comp.checkbox.selected.hover.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.checkbox.selected.hover.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Checkbox selected hover state layer opacitymd.comp.checkbox.selected.hover.state-layer.opacity
md.sys.state.hover.state-layer-opacityShow reference chainHide reference chain
md.comp.checkbox.selected.hover.state-layer.opacity
  • md.sys.state.hover.state-layer-opacity
8%
Checkbox unselected error hover outline colormd.comp.checkbox.unselected.error.hover.outline.color
md.sys.color.errorShow reference chainHide reference chain
md.comp.checkbox.unselected.error.hover.outline.color
  • md.sys.color.error
    • md.ref.palette.error40
#B3261E
Checkbox unselected hover icon colormd.comp.checkbox.unselected.hover.icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.checkbox.unselected.hover.icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Checkbox unselected hover outline colormd.comp.checkbox.unselected.hover.outline.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.checkbox.unselected.hover.outline.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Checkbox unselected hover state layer colormd.comp.checkbox.unselected.hover.state-layer.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.checkbox.unselected.hover.state-layer.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Checkbox unselected hover state layer opacitymd.comp.checkbox.unselected.hover.state-layer.opacity
md.sys.state.hover.state-layer-opacityShow reference chainHide reference chain
md.comp.checkbox.unselected.hover.state-layer.opacity
  • md.sys.state.hover.state-layer-opacity
8%
Focused
Focused tokens
TokenValue
Checkbox focus indicator colormd.comp.checkbox.focus.indicator.color
md.sys.color.secondaryShow reference chainHide reference chain
md.comp.checkbox.focus.indicator.color
  • md.sys.color.secondary
    • md.ref.palette.secondary40
#625B71
Checkbox selected error focus container colormd.comp.checkbox.selected.error.focus.container.color
md.sys.color.errorShow reference chainHide reference chain
md.comp.checkbox.selected.error.focus.container.color
  • md.sys.color.error
    • md.ref.palette.error40
#B3261E
Checkbox selected error focus icon colormd.comp.checkbox.selected.error.focus.icon.color
md.sys.color.on-errorShow reference chainHide reference chain
md.comp.checkbox.selected.error.focus.icon.color
  • md.sys.color.on-error
    • md.ref.palette.error100
#FFFFFF
Checkbox selected focus container colormd.comp.checkbox.selected.focus.container.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.checkbox.selected.focus.container.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Checkbox selected focus icon colormd.comp.checkbox.selected.focus.icon.color
md.sys.color.on-primaryShow reference chainHide reference chain
md.comp.checkbox.selected.focus.icon.color
  • md.sys.color.on-primary
    • md.ref.palette.primary100
#FFFFFF
Checkbox selected focus state layer colormd.comp.checkbox.selected.focus.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.checkbox.selected.focus.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Checkbox selected focus state layer opacitymd.comp.checkbox.selected.focus.state-layer.opacity
md.sys.state.focus.state-layer-opacityShow reference chainHide reference chain
md.comp.checkbox.selected.focus.state-layer.opacity
  • md.sys.state.focus.state-layer-opacity
10%
Checkbox unselected error focus outline colormd.comp.checkbox.unselected.error.focus.outline.color
md.sys.color.errorShow reference chainHide reference chain
md.comp.checkbox.unselected.error.focus.outline.color
  • md.sys.color.error
    • md.ref.palette.error40
#B3261E
Checkbox unselected focus icon colormd.comp.checkbox.unselected.focus.icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.checkbox.unselected.focus.icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Checkbox unselected focus outline colormd.comp.checkbox.unselected.focus.outline.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.checkbox.unselected.focus.outline.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Checkbox unselected focus state layer colormd.comp.checkbox.unselected.focus.state-layer.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.checkbox.unselected.focus.state-layer.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Checkbox unselected focus state layer opacitymd.comp.checkbox.unselected.focus.state-layer.opacity
md.sys.state.focus.state-layer-opacityShow reference chainHide reference chain
md.comp.checkbox.unselected.focus.state-layer.opacity
  • md.sys.state.focus.state-layer-opacity
10%
Pressed
Pressed tokens
TokenValue
Checkbox selected error pressed container colormd.comp.checkbox.selected.error.pressed.container.color
md.sys.color.errorShow reference chainHide reference chain
md.comp.checkbox.selected.error.pressed.container.color
  • md.sys.color.error
    • md.ref.palette.error40
#B3261E
Checkbox selected error pressed icon colormd.comp.checkbox.selected.error.pressed.icon.color
md.sys.color.on-errorShow reference chainHide reference chain
md.comp.checkbox.selected.error.pressed.icon.color
  • md.sys.color.on-error
    • md.ref.palette.error100
#FFFFFF
Checkbox selected pressed container colormd.comp.checkbox.selected.pressed.container.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.checkbox.selected.pressed.container.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Checkbox selected pressed icon colormd.comp.checkbox.selected.pressed.icon.color
md.sys.color.on-primaryShow reference chainHide reference chain
md.comp.checkbox.selected.pressed.icon.color
  • md.sys.color.on-primary
    • md.ref.palette.primary100
#FFFFFF
Checkbox selected pressed state layer colormd.comp.checkbox.selected.pressed.state-layer.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.checkbox.selected.pressed.state-layer.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Checkbox selected pressed state layer opacitymd.comp.checkbox.selected.pressed.state-layer.opacity
md.sys.state.pressed.state-layer-opacityShow reference chainHide reference chain
md.comp.checkbox.selected.pressed.state-layer.opacity
  • md.sys.state.pressed.state-layer-opacity
10%
Checkbox unselected error pressed outline colormd.comp.checkbox.unselected.error.pressed.outline.color
md.sys.color.errorShow reference chainHide reference chain
md.comp.checkbox.unselected.error.pressed.outline.color
  • md.sys.color.error
    • md.ref.palette.error40
#B3261E
Checkbox unselected pressed icon colormd.comp.checkbox.unselected.pressed.icon.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.checkbox.unselected.pressed.icon.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Checkbox unselected pressed outline colormd.comp.checkbox.unselected.pressed.outline.color
md.sys.color.on-surfaceShow reference chainHide reference chain
md.comp.checkbox.unselected.pressed.outline.color
  • md.sys.color.on-surface
    • md.ref.palette.neutral10
#1D1B20
Checkbox unselected pressed state layer colormd.comp.checkbox.unselected.pressed.state-layer.color
md.sys.color.primaryShow reference chainHide reference chain
md.comp.checkbox.unselected.pressed.state-layer.color
  • md.sys.color.primary
    • md.ref.palette.primary40
#6750A4
Checkbox unselected pressed state layer opacitymd.comp.checkbox.unselected.pressed.state-layer.opacity
md.sys.state.pressed.state-layer-opacityShow reference chainHide reference chain
md.comp.checkbox.unselected.pressed.state-layer.opacity
  • md.sys.state.pressed.state-layer-opacity
10%