The Checkbox component allows users to select one or more options from a set.
import { Checkbox, CheckboxGroup, CheckboxParts } from '@cerberus/react'The Checkbox component is a controlled component that can be used to select one or more options from a set. It can be used in a group with other checkboxes to allow for multiple selections.
The Checkbox component supports the indeterminate state, which is useful for indicating that a group of checkboxes is in a mixed state. To enable this state, set the checked prop to indeterminate.
The Checkbox component supports different sizes. You can set the size prop to sm, or md.
You can utilize the primitive components or the css prop to customize the checkbox.
| Component | Description |
|---|---|
| CheckboxRoot | The context provider for the Checkbox parts |
| CheckboxLabel | The label of the checkbox |
| CheckboxControl | The input of the checkbox |
| CheckboxIndicator | The indicator of the checkbox state |
| CheckboxGroup | The group container for multiple checkboxes |
| CheckboxHiddenInput | The native input for the checkbox |
The Checkbox component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| size | sm | This size of the Checkbox. |
The Checkbox component also accepts all the props of the CheckboxRoot primitive props
The CheckboxParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The CheckboxRoot component which is the Provider for the family. |
| Label | The CheckboxLabel component which displays the label and "required" notice. |
| Control | The CheckboxControl component which is the visual field. |
| Indicator | The CheckboxIndicator component which displays based on the checked state. |
| Group | The CheckboxGroup component which creates a controls the spacing of a group. |
| HiddenInput | The CheckboxHiddenInput component which displays the native input. |
On this page