Checkbox API
API reference docs for theCheckboxcomponent. For examples and details on the usage of this component, visit the component demo page.
Props
| Prop | Type | Description | Default |
|---|---|---|---|
label | ReactNode | Label for the checkbox describing its purpose. | _ |
isDisabled? | boolean | Disables the checkbox, making it non-interactive and visually styled as disabled. | false |
size? | 'standard'| 'large' | The size of the checkbox. | standard |
value? | string | Defines the value of the checkbox input, used when submitting a form. | _ |
checked? | boolean | Indicates whether the checkbox is checked, used in controlled components. | _ |
id? | string | A unique ID for the checkbox. | _ |
name? | boolean | The name attribute of the checkbox, useful for grouping in forms. | _ |
description? | ReactNode | Description text displayed alongside the checkbox, providing additional context. | _ |
errorMessage? | ReactNode | Message shown when the field is invalid, styled for error state and announced to screen-readers as invalid. | _ |
aria-describedby? | string | Defines the ID of the element that provides additional information about the checkbox for accessibility purposes. | _ |
onBlur? | function | Function called when the checkbox loses focus. | _ |
onClick? | function | Function called when the checkbox is clicked. | _ |
onChange? | function | Function called when the checkbox’s value changes. | _ |
indeterminate? | boolean | Indicates whether checkbox in an indeterminate state or not. Designed for scenarios like header groups where some, but not all, options are selected. | false |
checkboxPosition | start | end | Placement of the checkbox relative to the label. 'start' or 'end'. | start |
Note: For id and aria-describedby, if a value is provided, the IDs will be merged. Otherwise, React.useId will be used to generate unique IDs to associate the labels appropriately.