Forms
Checkbox
Boolean or tri-state control with a token-styled box. Supports color, error treatment, two sizes, label, required asterisk, and helper or error text.
Examples
States
Loading preview
<Checkbox label="Default" />
<Checkbox label="Checked" defaultChecked />
<Checkbox label="With error" error errorMessage="Required" />API
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | none | Visible label. |
checked / defaultChecked | boolean | none | Controlled or uncontrolled checked state. |
indeterminate | boolean | false | Mixed state, shown as a dash. |
error | boolean | false | Error treatment with red box. |
helperText / errorMessage | ReactNode | none | Helper or error text under the label. |
Guidelines
Do
- Always provide a label or an accessible name.
- Use indeterminate for parent or select-all controls.
Avoid
- Do not use a checkbox for mutually exclusive options; use a radio or Select.