Checkbox
Boolean form control with label, description, and error states.
Add it to your project
Eject the complete checkbox group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject checkboxbash
npx toucan eject checkboxapp.tsx
import { Checkbox } from '@/components/toucan/checkbox';Use when
Users may independently select or deselect an option.
Avoid when
Exactly one option in a set is allowed; use Radio.
Example
We send updates monthly
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Checkbox
Checkbox
Props type: CheckboxProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
description | string | undefined | No | Supporting text connected to the control. |
error | string | undefined | No | Validation error text or error state. |
hideLabel | boolean | false | No | Visually hide the label while keeping it available to assistive technology. |
indeterminate | boolean | false | No | Display an indeterminate state rather than a fixed value. |
label | string | — | Required | Visible or accessible label for the control. |
required | boolean | undefined | No | Marks the control as required. |
Also accepts the native input attributes that are not replaced by a Toucan prop.
Type exports
CheckboxProps
Accessibility
- Label association is built in.
- Errors and descriptions are referenced with aria-describedby.
Token families
checkboxfocus