role checkbox
Checkbox draft v0.1.0
Lets people turn one option on or off, or pick any number of options from a list.
A checkbox is a binary choice with a visible label: checked or unchecked, and a third, partially checked look when it stands for a group whose members disagree. Several checkboxes side by side let people pick any number of options; one checkbox alone confirms a statement (accepting terms, remembering a session). A setting that takes effect immediately is a Switch; a choice of exactly one option is a Radio group.
Playground
Token inspector
Part container
Not rendered in this configuration.
-
column-gap from default
{space.8}Details
- Value
-
8px - CSS
--checkbox-container-column-gap- Token
checkbox.container.column-gap
-
row-gap from default
{space.2}Details
- Value
-
2px - CSS
--checkbox-container-row-gap- Token
checkbox.container.row-gap
Part control
Not rendered in this configuration.
-
size
smallfrom default{size.2}Details
- Value
-
16px - CSS
--checkbox-control-size-small- Token
checkbox.control.size.small- Decisions
-
size
mediumfrom default{size.3}Details
- Value
-
20px - CSS
--checkbox-control-size-medium- Token
checkbox.control.size.medium- Decisions
-
border-radius
smallfrom default{corner-radius.2xs}Details
- Value
-
2px - CSS
--checkbox-control-border-radius-small- Token
checkbox.control.border-radius.small- Decisions
-
border-radius
mediumfrom default{corner-radius.xs}Details
- Value
-
4px - CSS
--checkbox-control-border-radius-medium- Token
checkbox.control.border-radius.medium- Decisions
-
border-width from default
{stroke-width.md}Details
- Value
-
1.2px - CSS
--checkbox-control-border-width- Token
checkbox.control.border-width- Decisions
-
background
defaultfrom default{global.bg.level.0.default}Details
- Resolves through
global.bg.base.neutral.1 semanticlight-switch.base.25 rawneutral.light.ash.25 raw- Value
-
#FDFDFDdark:#191919 - CSS
--checkbox-control-background-default- Token
checkbox.control.background.default- Decisions
-
background
hoverfrom default{global.bg.level.0.hover}Details
- Resolves through
global.bg.base.neutral.2 semanticlight-switch.base.50 rawneutral.light.ash.50 raw- Value
-
#F7F6F6dark:#212121 - CSS
--checkbox-control-background-hover- Token
checkbox.control.background.hover- Decisions
-
- The box is outlined in the accent neutral border color on the default surface when unchecked, and filled with the accent brand color with a mark in the on-accent brand icon color when checked or partially checked; hover tints the empty box with the surface hover color; an invalid box takes the base error border; disabled takes the shared disabled colors. The same colors hold for the Radio group and the Switch.
- A state is one token path segment: hover changes the empty box only; a checked, partially checked or disabled box does not change on hover.
-
background
checkedfrom default{global.bg.accent.brand.default}Details
- Resolves through
brand.light.600 raw- Value
-
#175DD6dark:#9EE7FA - CSS
--checkbox-control-background-checked- Token
checkbox.control.background.checked- Decisions
-
background
indeterminatefrom default{global.bg.accent.brand.default}Details
- Resolves through
brand.light.600 raw- Value
-
#175DD6dark:#9EE7FA - CSS
--checkbox-control-background-indeterminate- Token
checkbox.control.background.indeterminate- Decisions
-
background
disabledfrom default{global.bg.state.disabled.default}Details
- Value
-
#B6B4B41adark:#7676764d - CSS
--checkbox-control-background-disabled- Token
checkbox.control.background.disabled- Decisions
-
border-color
defaultfrom default{global.border.accent.neutral.default}Details
- Resolves through
light-switch.base.800 rawneutral.light.ash.800 raw- Value
-
#323031dark:#B9B7B7 - CSS
--checkbox-control-border-color-default- Token
checkbox.control.border-color.default- Decisions
-
border-color
hoverfrom default{global.border.accent.neutral.default}Details
- Resolves through
light-switch.base.800 rawneutral.light.ash.800 raw- Value
-
#323031dark:#B9B7B7 - CSS
--checkbox-control-border-color-hover- Token
checkbox.control.border-color.hover- Decisions
-
- The box is outlined in the accent neutral border color on the default surface when unchecked, and filled with the accent brand color with a mark in the on-accent brand icon color when checked or partially checked; hover tints the empty box with the surface hover color; an invalid box takes the base error border; disabled takes the shared disabled colors. The same colors hold for the Radio group and the Switch.
- A state is one token path segment: hover changes the empty box only; a checked, partially checked or disabled box does not change on hover.
-
border-color
checkedfrom default{global.border.accent.brand.default}Details
- Resolves through
brand.light.700 raw- Value
-
#1148A9dark:#53D6F2 - CSS
--checkbox-control-border-color-checked- Token
checkbox.control.border-color.checked- Decisions
-
border-color
indeterminatefrom default{global.border.accent.brand.default}Details
- Resolves through
brand.light.700 raw- Value
-
#1148A9dark:#53D6F2 - CSS
--checkbox-control-border-color-indeterminate- Token
checkbox.control.border-color.indeterminate- Decisions
-
border-color
invalidfrom default{global.border.base.functional.error.default}Details
- Resolves through
functional.error.600 raw- Value
-
#C01619dark:#E12A23 - CSS
--checkbox-control-border-color-invalid- Token
checkbox.control.border-color.invalid- Decisions
-
border-color
disabledfrom default{global.border.state.disabled.default}Details
- Value
-
#B6B4B466dark:#363636b2 - CSS
--checkbox-control-border-color-disabled- Token
checkbox.control.border-color.disabled- Decisions
-
color
checkedfrom default{global.icon.on-accent.brand.default}Details
- Resolves through
global.text.on-accent.brand.default semanticbrand.light.25 raw- Value
-
#FBFCFDdark:#09191D - CSS
--checkbox-control-color-checked- Token
checkbox.control.color.checked- Decisions
-
color
indeterminatefrom default{global.icon.on-accent.brand.default}Details
- Resolves through
global.text.on-accent.brand.default semanticbrand.light.25 raw- Value
-
#FBFCFDdark:#09191D - CSS
--checkbox-control-color-indeterminate- Token
checkbox.control.color.indeterminate- Decisions
-
color
disabledfrom default{global.icon.state.disabled.default}Details
- Resolves through
global.text.state.disabled.default semanticlight-switch.base.500 rawneutral.light.ash.500 raw- Value
-
#8C8C8Cdark:#9D9B9Cb2 - CSS
--checkbox-control-color-disabled- Token
checkbox.control.color.disabled- Decisions
-
outline-width
focus-visiblefrom default{focus.ring.width}Details
- Resolves through
stroke-width.lg semantic- Value
-
2.4px - CSS
--checkbox-control-outline-width-focus-visible- Token
checkbox.control.outline-width.focus-visible
-
outline-offset
focus-visiblefrom default{focus.ring.offset}Details
- Resolves through
space.4 semantic- Value
-
4px - CSS
--checkbox-control-outline-offset-focus-visible- Token
checkbox.control.outline-offset.focus-visible
-
outline-color
focus-visiblefrom default{color.focus.ring}Details
- Resolves through
brand.light.600 raw- Value
-
#175DD6dark:#9EE7FA - CSS
--checkbox-control-outline-color-focus-visible- Token
checkbox.control.outline-color.focus-visible
-
transition.duration from default
{duration.fast}Details
- Value
-
150ms - CSS
--checkbox-control-transition-duration- Token
checkbox.control.transition.duration
-
transition.easing from default
{easing.standard}Details
- Value
-
cubic-bezier(0.2, 0, 0, 1) - CSS
--checkbox-control-transition-easing- Token
checkbox.control.transition.easing
Part label
Not rendered in this configuration.
-
color
defaultfrom default{global.text.on-base.neutral.primary}Details
- Resolves through
light-switch.base.950 rawneutral.light.ash.950 raw- Value
-
#0E0D0Ddark:#D2CECF - CSS
--checkbox-label-color-default- Token
checkbox.label.color.default
-
color
disabledfrom default{global.text.state.disabled.default}Details
- Resolves through
light-switch.base.500 rawneutral.light.ash.500 raw- Value
-
#8C8C8Cdark:#9D9B9Cb2 - CSS
--checkbox-label-color-disabled- Token
checkbox.label.color.disabled
-
typography
smallfrom defaultDetails
- Value
-
Inter [object Object]/1.5 400 [object Object] - CSS
--checkbox-label-typography-small-font-family- Token
checkbox.label.typography.small- Decisions
-
typography
mediumfrom defaultDetails
- Value
-
Inter [object Object]/1.5 400 [object Object] - CSS
--checkbox-label-typography-medium-font-family- Token
checkbox.label.typography.medium- Decisions
Part description
Not rendered in this configuration.
-
color
defaultfrom default{global.text.on-base.neutral.secondary}Details
- Resolves through
light-switch.base.800 rawneutral.light.ash.800 raw- Value
-
#323031dark:#B9B7B7 - CSS
--checkbox-description-color-default- Token
checkbox.description.color.default
-
color
disabledfrom default{global.text.state.disabled.default}Details
- Resolves through
light-switch.base.500 rawneutral.light.ash.500 raw- Value
-
#8C8C8Cdark:#9D9B9Cb2 - CSS
--checkbox-description-color-disabled- Token
checkbox.description.color.disabled
-
typography
smallfrom defaultDetails
- Value
-
Inter [object Object]/1.5 400 [object Object] - CSS
--checkbox-description-typography-small-font-family- Token
checkbox.description.typography.small- Decisions
-
typography
mediumfrom defaultDetails
- Value
-
Inter [object Object]/1.5 400 [object Object] - CSS
--checkbox-description-typography-medium-font-family- Token
checkbox.description.typography.medium- Decisions
<div class="ds-checkbox" data-size="medium">
<input
type="checkbox"
class="ds-checkbox__control"
data-part="control"
id="ds-checkbox-22"
>
<label
class="ds-checkbox__label"
data-part="label"
for="ds-checkbox-22"
>Send me a weekly summary</label>
</div>