Forms

Checkbox

Spectrum's checkbox: a 16px box with a 2px gray border and small corners that fills with the accent blue when checked.

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`label`Required	`string`
`hideLabel`	`boolean`
`checked`	`boolean`
`defaultChecked`	`boolean`
`onChange`	`(checked: boolean) => void`
`round`	`boolean`	The to-do circle instead of the square box.
`size`	`'M' \| 'L'`
`disabled`	`boolean`
`className`	`string`
`children`	`React.ReactNode`

Guidelines

Spectrum's checkbox: a 16px box with a 2px gray border and small corners that fills with the accent blue when checked. round gives a circle where a softer look is wanted.

Provide: label (always; with hideLabel it becomes the accessible name and tooltip), checked and onChange(checked), or defaultChecked; round, size (M 16px, L 20px), disabled.

Use the square box everywhere by default, to-dos included.
A label says what is true when checked: "Raw footage included", not "Raw footage?".