Checkbox

States

State	Visual change	Tokens
Unchecked	Input border, raised background	color-border-input, color-surface-raised
Checked	Primary fill and a white check	color-action-primary-default, color-action-on-primary-default
Mixed	Primary fill and a dash	color-action-primary-default
Focus	2 px outer focus ring with a 2 px gap	color-focus-ring, border-width-focus
Invalid	Danger border	color-border-danger
Disabled	Faded box and label	color-surface-disabled, color-border-disabled, color-text-disabled

Measurements

Property	Value	Token
Box	16 × 16 px	checkbox-size
Corner radius	4 px	checkbox-radius
Mark	14 px	checkbox-mark-size
Gap between box and label	8 px	space-md
Label text style	body-md (14 px)	text.body-md

Tokens

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

Token	Sample	Light mode	Dark mode
--bigbang-checkbox-size		16px16px16px	16px16px16px
--bigbang-checkbox-radius		4px4px4px	4px4px4px
--bigbang-checkbox-mark-size		14px14px14px	14px14px14px
--bigbang-color-border-strong		#8c8c8c#8c8c8c#8c8c8c	#8c8c8c#8c8c8c#8c8c8c
--bigbang-color-surface-raised		#ffffff#ffffff#ffffff	#262626#262626#262626
--bigbang-color-action-primary-default		#146d83#171717#171717	#77bacf#e5e5e5#e5e5e5
--bigbang-color-action-on-primary-default		#ffffff#fafafa#fafafa	#0a0a0a#171717#171717
--bigbang-color-border-danger		#c14347#c14347#c14347	#ff9a97#ff9a97#ff9a97
--bigbang-color-focus-ring		#146d83#737373#737373	#77bacf#8c8c8c#8c8c8c
--bigbang-space-md		8px8px8px	8px8px8px

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
Checking	The check or dash, opacity 0 → 1 and scale 0.6 → 1 (motion.selectionMark)	motion-selection-duration (110 ms)	motion-selection-easing	Scale stays at 1; the mark only appears.
Box fill and border	background-color, border-color (motion.hover)	motion-hover-duration (110 ms)	motion-hover-easing	Unchanged; a colour transition.
Focus	The focus ring appears at once, without a transition	None	None	Unchanged.

See Motion for the values.