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
| Type | Description | |
|---|---|---|
| aria-describedby | string | ID reference(s) to element(s) that describe the checkbox. This may include helper text, error text, or external descriptions. |
| aria-errormessage | string | ID reference to the element containing the error message. Typically used together with aria-invalid. |
| aria-label | string | Accessible label for the checkbox when no visible label is present or when a more descriptive label is needed. |
| aria-labelledby | string | ID reference(s) to element(s) that label the checkbox. If provided, this takes precedence over the internal label association. |
| checked | boolean | Checked state of the checkbox. |
| className | string | Custom class name for additional styling. |
| data-testid | string | Optional test ID for testing frameworks. |
| description | ReactNode | Visible helper text rendered below or beside the checkbox. Should provide extra guidance for the user. |
| disabled | boolean | Whether the checkbox is disabled. |
| errorMessage | ReactNode | Visible error message rendered for invalid state. This can also be referenced by assistive technologies. |
| indeterminate | boolean | Whether the checkbox is in an indeterminate (mixed) state. |
| invalid | boolean | Marks the checkbox as invalid. Useful when validation fails. |
| label | ReactNode | Label text displayed beside the checkbox. |
| labelPosition | "left" | "right" | Position of the label relative to the checkbox ('left' | 'right'). |
| onChange | (checked: boolean) => void | Callback when the checkbox value changes. |
| required | boolean | Whether the checkbox is required. |
| role | "checkbox" | Optional role override, though checkbox is the default semantic role. |
| rounding | RoundingType | Controls the rounding of the checkbox ('none' | 'small' | 'medium' | 'large' | 'full'). |
| shadow | ShadowType | Controls the shadow of the checkbox ('none' | 'light' | 'medium' | 'strong' | 'intense'). |
| size | SizeType | Size of the checkbox ('xs' | 'small' | 'medium' | 'large' | 'xl'). |
| state | StateType | State of the checkbox ('success' | 'error' | 'warning' | 'disabled' | ''). |
| theme | ThemeType | Optional theme to style the checkbox ('primary' | 'secondary' | 'tertiary' | 'quaternary' | 'clear'). |