Skip to content

Forms

Checkbox

A choice that takes effect when the form is submitted.

When to reach for it

A setting that applies immediately is a Switch.

Examples

default

Notes

A choice that takes effect when the form is submitted.

Supports the indeterminate state (checked="indeterminate"), which is what a "select all" header needs when only some rows are selected — a plain unchecked box there tells the reader the opposite of the truth.

Pair with Field, or wrap it in a <label> at the call site so the words beside it are part of the click target.

Props

Also accepts everything in ComponentProps<typeof CheckboxPrimitive.Root>. Those are forwarded to the underlying element and are not listed row by row.

Accessibility

  • Supports the indeterminate state, which is what a “select all” header needs when only some rows are selected.