Checkbox

Checkboxes can be used to provide a user with a binary choice, for example, toggling email notifications on and off.

Best practices

  • When changing a setting, checkboxes should always be accompanied with a label.
  • Labels should be descriptive enough, that they can stand up on their own. For example: 'Enable email notifications' is better than 'Enable/Disable'.

Props

NameTypeDescription
size
'small' | 'medium' | 'large'
checked
boolean
indeterminate
boolean
disabled
boolean
label
string | React$Node
hint
string
onClick
Function
name
string

Checkbox

A standard checkbox. Pass a label using the prop to ensure that interaction happens on both the checkbox and the label
<Checkbox checked={false} label="Stay up to date" />

Disabled

A disabled checkbox. Can still displayed a checked state
<Checkbox checked={true} disabled={true} label="Onboarding freelancers" size="medium" />

Sizing

Checkboxes can be in three sizes. Small, medium, and large
<span> <Checkbox label="Onboarding freelancers" size="small" /> <Checkbox label="Onboarding freelancers" size="medium" /> <Checkbox label="Freelancer invoices" size="large" /> </span>

Indeterminate

Checkboxes can be indeterminate checked
<Checkbox indeterminate={true} label="Freelancer invoices" size="large" />

With a custom label

Checkboxes can also have custom labels
<Checkbox label={<Text color="pink500" marginLeft={8} size="extra-large">A custom label</Text>} size="medium" />

With a label and hint

Note, that in order to set a hint, a label must also be set
<Checkbox disabled={true} hint="We'll occasionally send you emails with updates" label="Stay up to date" size="large" />