Checkbox

A control that allows the user to toggle between checked and not checked.

Dependencies

• @radix-ui/react-checkbox (opens in a new tab) - Built on top of Checbox Primitive

Usage

Variants

Checkboxes come in two variants: default, and emphasis.

Sizes

Checkboxes come in two sizes: sm, and lg. The default size is sm.

Indeterminate

Checkboxes can be set to an Indeterminate state. This is useful when the checkbox is part of a group of checkboxes, and some of the checkboxes are checked, and some are not checked. The Indeterminate state is represented by a dash in the checkbox.

Disabled

Checkboxes can be disabled.

Overflowing text

Checkbox can have overflowing text.

With text

Checkbox can have text next to it. The text can be wrapped in a <Label> component.

Form

API Reference

To see the full API docs of Checkbox component visit Radix Docs (opens in a new tab).