Checkbox
The Checkbox component allows users to select one or more options from a set.
import { Checkbox, CheckboxGroup, CheckboxParts } from '@cerberus/react'Usage
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.
Indeterminate State
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.
Sizes
The Checkbox component supports different sizes. You can set the size prop to sm, or md.
Primitives
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 |
API
Props
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
Parts
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