Components

CheckboxGroup

Gathers related checkboxes under one legend and shares their list of values.

Storybook: Storybook
Source: Source

States

State	Visual change	Tokens
Default	Legend, help text and items	`color-text-default`, `color-text-subtle`
Invalid	Error text	`color-text-danger`
Disabled	Every item faded	`color-text-disabled`

For the item states, see the Checkbox specs tab.

Measurements

Property	Value	Token
Gap between parts	6 px	`space-sm`
Gap between vertical items	6 px	`space-sm`
Gap between horizontal items	12 px	`space-lg`
Legend style	`label-md` (14 px)	`text.label-md`

Tokens

Values are shown for the selected brand; change the brand from the top bar.

Token	Sample	Light mode	Dark mode
`--bigbang-color-text-default`		`#171717#171717#171717`	`#fafafa#fafafa#fafafa`
`--bigbang-color-text-subtle`		`#404040#404040#404040`	`#d4d4d4#d4d4d4#d4d4d4`
`--bigbang-color-text-danger`		`#a6383c#a6383c#a6383c`	`#ffbebb#ffbebb#ffbebb`
`--bigbang-space-sm`		`6px6px6px`	`6px6px6px`
`--bigbang-space-lg`		`12px12px12px`	`12px12px12px`

Motion and interaction

Interaction	Motion	Reduced motion
Error text enter	`opacity` and a 4 px drop (`motion.fieldMessage`), `motion-collapsible-duration` (150 ms)	The distance becomes 0; the text only appears
Checking items	Each item uses the Checkbox `motion.selectionMark` (110 ms)	Scale stays at 1

See Motion for the values.