Checkbox

Examples

Checked, unchecked, indeterminate, with help text.

Send me product updatesI accept the termsRequired to create an accountSome plugins selectedNot available on the Free plan

Checkbox group

Several choices with one label. Value is the list of checked values.

Run these checks

ContrastTouch targetsAlt text

Selected: contrast

Select all

The indeterminate state for a parent checkbox.

All plugins

PaletteContrastType scale

Cards

Several picks as tiles, for add-ons or features.

Add-ons

Figma kitEvery component, variables, Dark and LightPro blocksHero, pricing, auth, settingsTemplatesDashboards, lists, forms

Props

`Checkbox` props

Show 18 React Aria props

A checkbox with checked, indeterminate, invalid and disabled states.

Prop	Type	Default	Description
`children`	`ReactNode`	-	The label next to the box.
`description`	`ReactNode`	-	Help text under the label.

`CheckboxGroup` props

Show 14 React Aria props

A labeled set of checkboxes; value is the list of checked values.

Prop	Type	Default	Description
`appearance`	`"default" \| "cards"`	`'default'`	default (a list) or cards (bordered tiles, for plans or features).
`description`	`ReactNode`	-	Help text under the group.
`errorMessage`	`ReactNode \| ((v: ValidationResult) => ReactNode)`	-	Error text, shown when the group is invalid.
`label`	`ReactNode`	-	The visible label for the group.
`orientation`	`"horizontal" \| "vertical"`	`'vertical'`	vertical (default) or horizontal.

A real checkbox input, so it works with forms and every assistive technology.
CheckboxGroup is a labelled group.

Keyboard

Key	Does
`Space`	Toggles the checkbox

Do and don't

Do

Write labels as positive statements: Send me updates.

Don't

Don't use a checkbox for a setting that applies right away: use Switch.

In Figma

Checkbox with State (Unchecked, Checked, Indeterminate) × Interaction × Invalid.