Default
default.tsx
<Checkbox label="Accept Terms" checked={checked} onChange={...} />Checkbox
The Checkbox component is a versatile form control for selecting one or multiple options.
Usage & Examples
Props API
30 props
Columns
Default | Description | ||||
|---|---|---|---|---|---|
aria-describedby | string | No | aria | — | ID reference(s) to element(s) that describe the checkbox. This may include helper text, error text, or external descriptions. |
aria-errormessage | string | No | aria | — | ID reference to the element containing the error message. Typically used together with aria-invalid. |
aria-label | string | No | aria | — | Accessible label for the checkbox when no visible label is present or when a more descriptive label is needed. |
aria-labelledby | string | No | aria | — | ID reference(s) to element(s) that label the checkbox. If provided, this takes precedence over the internal label association. |
boxClassName | string | No | props | — | Additional class names for the visual checkbox box. |
checked | boolean | Yes | props | — | Checked state of the checkbox. |
className | string | No | styling | — | Custom class name for additional styling. |
data-testid | string | No | testing | — | Backward-compatible alias for test ID attributes. |
description | ReactNode | No | props | — | Visible helper text rendered below or beside the checkbox. Should provide extra guidance for the user. |
descriptionClassName | string | No | props | — | Additional class names for the helper description. |
disabled | boolean | No | props | false | Whether the checkbox is disabled. |
errorMessage | ReactNode | No | props | — | Visible error message rendered for invalid state. This can also be referenced by assistive technologies. |