Checkbox
Checkboxes let users select one or more items from a list, or turn an item on or off
- Use checkboxes (instead of switches or radio buttons) if multiple options can be selected from a list
- Label should be scannable
- Selected items are more prominent than unselected items
Example
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Usage
Checkboxes visually group similar items effectively and take up less space than toggles.
Standard Checkbox
Alternate selection controls
Checkboxes, radio buttons, and toggles are the three main types of selection controls. They all help people make choices, like selecting options or switching settings on or off.
Use checkboxes to select multiple related options in a list.
Use radio buttons to select a single option in a list.
Use toggles to select standalone or more verbose options in a list, like settings.
On this page
import { Field, Label, Checkbox } from '@cerberus/react'Usage
Style Customizing
To customize the Checkbox we recommend extending the slot recipe provided by the @cerberus/panda-preset package.
Default Icon Customization
You can customize the default icon that shows by adding the avatar property to the defineIcons function at the root level of your app.
import { defineIcons } from '@cerberus/react'import { Check } from 'lucide-react'
defineIcons({ checkbox: Check,})API
export interface FieldProps { disabled?: boolean invalid?: boolean required?: boolean readOnly?: boolean}
define function Field(props: PropsWithChildren<FieldProps>): ReactNodeexport interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> { describedBy?: string id: string mixed?: boolean size?: 'md' | 'lg'}
define function Checkbox(props: CheckboxProps): ReactNodeProps
The Checkbox component accepts the following props:
| Name | Default | Description |
|---|---|---|
| describedBy | The ID of the FieldMessage element that describes the input field. | |
| id | An identifier that is shared with the Label htmlFor attribute. | |
| mixed | An indeterminate state of a checkbox. | |
| size | md | The size of the input field. |
On this page
Use Cases
- Users should be able to:
- Navigate to a checkbox with assistive technology
- Toggle the checkbox on and off
- Get appropriate feedback based on input type documented under Interaction & style
Interaction & Style
The parent checkbox has three states: selected, unselected, and mixed.
Checkboxes can be selected or unselected regardless of the state of the other checkboxes in a group.
If some, but not all, child checkboxes are checked, the parent checkbox becomes mixed. Selecting an mixed parent checkbox will check all of its child checkboxes.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | To move to the next element in a group |
| Space | Toggles a focused checkbox between selected and unselected |
Labeling Elements
If the UI text is correctly linked to the checkbox, assistive tech (such as a screen reader) will read the UI text followed by the component's role.
The accessibility label for an individual checkbox is typically the same as its adjacent text label.
On this page