Checkbox
The Checkbox component is a versatile form control for selecting one or multiple options.
Usage
Default
<Checkbox label="Accept Terms" checked={checked} onChange={...} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | - | Whether the checkbox is checked. |
| indeterminate | boolean | false | Displays the checkbox in an indeterminate state. |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | Visual theme for the checkbox. |
| rounding | "none" | "small" | "medium" | "large" | Configured Default | Border radius style for the checkbox. |
| size | "xs" | "small" | "medium" | "large" | "xl" | Configured Default | Checkbox size preset. |
| shadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Shadow style for the checkbox. |
| state | "" | "success" | "error" | "warning" | - | Special state styling (e.g. success, error, warning). |
| disabled | boolean | false | Disable the checkbox input. |
| label | string | - | The text label shown next to the checkbox. |
| labelPosition | "left" | "right" | "right" | Show the label on the left or right side of the checkbox. |
| className | string | - | Additional CSS class names. |
| id | string | - | HTML id attribute for the checkbox. |
| data-testid | string | "checkbox" | Test ID for end-to-end or unit testing. |
| onChange | (checked: boolean) => void | - | Callback fired when the checked state changes. |