Checkbox

Ready

Checkboxes are inputs that offer to the user the possibility to select one or more options from a range of attributes.

Code

Usage

Specifications

States

The following states are defined in the life cycle of the component: unselected enabled, unselected hover, unselected focus, unselected disabled, selected enabled, selected hover, selected focus and selected disabled.

Anatomy

1.
Checkbox input
2.
Label

Design tokens

Color

On-light

Component token	Element	Core token	Value
`selectedBackgroundColor`	Fill	`color-blue-800`	#0067b3
`selectedHoverBackgroundColor`	Fill:hover	`color-blue-900`	#003c66
`selectedDisabledBackgroundColor`	Fill:disabled	`color-grey-500`	#999999
`borderColor`	Border	`color-blue-800`	#0067b3
`hoverBorderColor`	Border:hover	`color-blue-900`	#003c66
`disabledBorderColor`	Border:disabled	`color-grey-500`	#999999
`checkColor`	Check mark	`color-white`	#ffffff
`disabledCheckColor`	Check mark:disabled	`color-white`	#ffffff
`fontColor`	Label	`color-black`	#000000
`disabledFontColor`	Label:disabled	`color-grey-500`	#999999
`focusColor`	Outline:focus	`color-blue-700`	#0095ff

On-dark

Component token	Element	Core token	Value
`selectedBackgroundColorOnDark`	Fill	`color-grey-200`	#e6e6e6
`selectedHoverBackgroundColorOnDark`	Fill:hover	`color-white`	#ffffff
`selectedDisabledBackgroundColorOnDark`	Fill:disabled	`color-grey-800`	#4d4d4d
`borderColorOnDark`	Border	`color-grey-200`	#e6e6e6
`hoverBorderColorOnDark`	Border:hover	`color-white`	#ffffff
`disabledBorderColorOnDark`	Border:disabled	`color-grey-800`	#4d4d4d
`checkColorOnDark`	Check mark	`color-black`	#000000
`disabledCheckOnDark`	Check mark:disabled	`color-grey-500`	#999999
`fontColorOnDark`	Label	`color-white`	#ffffff
`disabledFontColorOnDark`	Label:disabled	`color-grey-500`	#999999
`focusColorOnDark`	Outline:focus	`color-blue-600`	#0095ff

Spacing

Component token	Element	Core token	Value
`inputMargin`	Checkbox input	`spacing-8`	0.5rem / 8px

Typography

Component token	Element	Core token	Value
`fontFamily`	Label	`font-family-sans`	'Open Sans', sans-serif
`fontSize`	Label	`font-scale-02`	0.875rem / 14px
`fontWeight`	Label	`font-weight-regular`	400

Border

Property	Element	Core token	Value
`border-width`	Checkbox input	`border-width-2`	2px
`border-style`	Checkbox input	`border-style-solid`	solid
`border-radius`	Checkbox input	`border-radius-small`	0.125rem / 2px
`border-width`	Focus border	`border-width-2`	2px
`border-style`	Focus border	`border-style-solid`	solid
`border-radius`	Focus border	`border-radius-medium`	0.25rem / 4px