role group
Checkbox group draft v0.1.0
Lets people pick any number of options from a short, visible set, under one legend.
A checkbox group shows every option at once, with a legend naming the choice, and lets people check any number of them, including none. It is the grouped form of the Checkbox: the group carries the legend, the shared help text and the error message, and each option its own label, description, value and checked state. Exactly one choice is a Radio group; a long list is a Select.
Tokens
From packages/tokens/src/components/checkbox-group.tokens.json. Path grammar: checkbox-group.<part>.<property>[.<option>][.<state>]. Every value aliases a semantic token.
No token matches.
Part container (3)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
checkbox-group.container.row-gap
Between the legend, the description, the options and the error message.
|
dimension |
{space.8}
|
8px
|
--checkbox-group-container-row-gap
|
checkbox-group.container.gap.vertical
|
dimension |
{space.8}
|
8px
|
--checkbox-group-container-gap-vertical
|
checkbox-group.container.gap.horizontal
|
dimension |
{space.16}
|
16px
|
--checkbox-group-container-gap-horizontal
|
Part legend (3)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
checkbox-group.legend.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--checkbox-group-legend-color-default
|
checkbox-group.legend.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--checkbox-group-legend-color-disabled
|
checkbox-group.legend.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--checkbox-group-legend-typography-font-family--checkbox-group-legend-typography-font-size--checkbox-group-legend-typography-font-weight--checkbox-group-legend-typography-line-height--checkbox-group-legend-typography-letter-spacing
|
Part description (3)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
checkbox-group.description.color.default
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--checkbox-group-description-color-default
|
checkbox-group.description.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--checkbox-group-description-color-disabled
|
checkbox-group.description.typography
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--checkbox-group-description-typography-font-family--checkbox-group-description-typography-font-size--checkbox-group-description-typography-font-weight--checkbox-group-description-typography-line-height--checkbox-group-description-typography-letter-spacing
|
Part option (2)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
checkbox-group.option.column-gap
Between the radio and its label column.
|
dimension |
{space.8}
|
8px
|
--checkbox-group-option-column-gap
|
checkbox-group.option.row-gap
Between an option's label and its description.
|
dimension |
{space.2}
|
2px
|
--checkbox-group-option-row-gap
|
Part control (21)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
checkbox-group.control.size.small
|
dimension |
{size.2}
|
16px
|
--checkbox-group-control-size-small
|
checkbox-group.control.size.medium
|
dimension |
{size.3}
|
20px
|
--checkbox-group-control-size-medium
|
checkbox-group.control.border-radius.small
|
dimension |
{corner-radius.2xs}
|
2px
|
--checkbox-group-control-border-radius-small
|
checkbox-group.control.border-radius.medium
|
dimension |
{corner-radius.xs}
|
4px
|
--checkbox-group-control-border-radius-medium
|
checkbox-group.control.border-width
|
dimension |
{stroke-width.md}
|
1.2px
|
--checkbox-group-control-border-width
|
checkbox-group.control.background.default
|
color |
{global.bg.level.0.default}
|
light
#FDFDFD
dark
#191919
|
--checkbox-group-control-background-default
|
checkbox-group.control.background.hover
|
color |
{global.bg.level.0.hover}
|
light
#F7F6F6
dark
#212121
|
--checkbox-group-control-background-hover
|
checkbox-group.control.background.checked
|
color |
{global.bg.accent.brand.default}
|
light
#175DD6
dark
#9EE7FA
|
--checkbox-group-control-background-checked
|
checkbox-group.control.background.disabled
|
color |
{global.bg.state.disabled.default}
|
light
#B6B4B41a
dark
#7676764d
|
--checkbox-group-control-background-disabled
|
checkbox-group.control.border-color.default
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--checkbox-group-control-border-color-default
|
checkbox-group.control.border-color.hover
|
color |
{global.border.accent.neutral.default}
|
light
#323031
dark
#B9B7B7
|
--checkbox-group-control-border-color-hover
|
checkbox-group.control.border-color.checked
|
color |
{global.border.accent.brand.default}
|
light
#1148A9
dark
#53D6F2
|
--checkbox-group-control-border-color-checked
|
checkbox-group.control.border-color.invalid
|
color |
{global.border.base.functional.error.default}
|
light
#C01619
dark
#E12A23
|
--checkbox-group-control-border-color-invalid
|
checkbox-group.control.border-color.disabled
|
color |
{global.border.state.disabled.default}
|
light
#B6B4B466
dark
#363636b2
|
--checkbox-group-control-border-color-disabled
|
checkbox-group.control.color.checked
|
color |
{global.icon.on-accent.brand.default}
|
light
#FBFCFD
dark
#09191D
|
--checkbox-group-control-color-checked
|
checkbox-group.control.color.disabled
|
color |
{global.icon.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--checkbox-group-control-color-disabled
|
checkbox-group.control.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--checkbox-group-control-outline-width-focus-visible
|
checkbox-group.control.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--checkbox-group-control-outline-offset-focus-visible
|
checkbox-group.control.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--checkbox-group-control-outline-color-focus-visible
|
checkbox-group.control.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--checkbox-group-control-transition-duration
|
checkbox-group.control.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--checkbox-group-control-transition-easing
|
Part option-label (4)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
checkbox-group.option-label.color.default
|
color |
{global.text.on-base.neutral.primary}
|
light
#0E0D0D
dark
#D2CECF
|
--checkbox-group-option-label-color-default
|
checkbox-group.option-label.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--checkbox-group-option-label-color-disabled
|
checkbox-group.option-label.typography.small
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--checkbox-group-option-label-typography-small-font-family--checkbox-group-option-label-typography-small-font-size--checkbox-group-option-label-typography-small-font-weight--checkbox-group-option-label-typography-small-line-height--checkbox-group-option-label-typography-small-letter-spacing
|
checkbox-group.option-label.typography.medium
|
typography |
{body.family}{body.size.md}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":16,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--checkbox-group-option-label-typography-medium-font-family--checkbox-group-option-label-typography-medium-font-size--checkbox-group-option-label-typography-medium-font-weight--checkbox-group-option-label-typography-medium-line-height--checkbox-group-option-label-typography-medium-letter-spacing
|
Part option-description (4)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
checkbox-group.option-description.color.default
|
color |
{global.text.on-base.neutral.secondary}
|
light
#323031
dark
#B9B7B7
|
--checkbox-group-option-description-color-default
|
checkbox-group.option-description.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--checkbox-group-option-description-color-disabled
|
checkbox-group.option-description.typography.small
|
typography |
{body.family}{body.size.xs}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":12,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--checkbox-group-option-description-typography-small-font-family--checkbox-group-option-description-typography-small-font-size--checkbox-group-option-description-typography-small-font-weight--checkbox-group-option-description-typography-small-line-height--checkbox-group-option-description-typography-small-letter-spacing
|
checkbox-group.option-description.typography.medium
|
typography |
{body.family}{body.size.sm}{body.weight.regular}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":400,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--checkbox-group-option-description-typography-medium-font-family--checkbox-group-option-description-typography-medium-font-size--checkbox-group-option-description-typography-medium-font-weight--checkbox-group-option-description-typography-medium-line-height--checkbox-group-option-description-typography-medium-letter-spacing
|
Part error-message (2)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
checkbox-group.error-message.color
|
color |
{global.text.on-base.functional.error.default}
|
light
#E12A23
dark
#EE5248
|
--checkbox-group-error-message-color
|
checkbox-group.error-message.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.normal}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.5,"letterSpacing":{"value":0,"unit":"px"}}
|
--checkbox-group-error-message-typography-font-family--checkbox-group-error-message-typography-font-size--checkbox-group-error-message-typography-font-weight--checkbox-group-error-message-typography-line-height--checkbox-group-error-message-typography-letter-spacing
|