Checkbox
A checkbox allows a user to select a value from a small set of options, often binary.

Types

All checkbox types use an input with type checkbox unless type is provided. Use type if you'd like to mix and match style and behavior. For instance, slider with type radio for exclusive sliders.

Checkbox

A box for checking.

You can define a label with a props object.

You can define a label by passing your own element.

Toggle

A checkbox can toggle.

Slider

A checkbox can look like a slider.

Radio

A checkbox can be formatted as a radio element. This means it is an exclusive option.

Radio Group

Radios in a group must be controlled components.

States

Read Only

A checkbox can be read-only and unable to change states.

Checked

A checkbox can be checked.

Use defaultChecked as you normally would to set default form values.

Indeterminate

A checkbox can be indeterminate.

Disabled

A checkbox can be read-only and unable to change states.

Variations

Fitted

A fitted checkbox does not leave padding for a label.

The fitted class is automatically applied if there is no label prop.

Usage

Controlled

You can control the checked state of a checkbox.

DOM Comparison

A checkbox behaves like a native DOM checkbox, including keyboard accessibility.

This is the bottom
Blazing deployments by Vercel-Logo Vercel.