Checkbox

Checkboxes allow the user to select one or more items from a set.

Overview

Toggles: checked, disabled

All options

States

checked \ state	enabled	disabled
unchecked	enabled unchecked	disabled unchecked
checked	enabled checked	disabled checked

label \ checked	unchecked	checked
none
label	Label	Label
label + secondLabel	LabelSecond label	LabelSecond label

Examples

With second label

Add a secondary text below the checkbox label for additional context (left aligned).

Email notificationsReceive updates about your accountMarketing emailsGet news about new features and offersTerms and ConditionsI agree to the terms of service

Accessibility

Keyboard

Each checkbox is a real input, so it takes Tab focus, toggles with Space and shows a focus ring. The tick scales in when checked.

Props

Prop	Type	Required	Description
label	string	No	—
secondLabel	string	No	—
checked	boolean	No	—
onChange	(checked: boolean) => void	No	—
disabled	boolean	No	—