Checkbox API
View componentThe full prop reference for the Checkbox component. A control that allows the user to toggle between checked, not checked, and indeterminate.
Import
import { Checkbox } from '@structyl/styled';Props
Checkbox
The main checkbox component wrapper that combines the headless primitive with styled styling and icon indicators.
| Prop | Type | Default |
|---|---|---|
| checked# | boolean | 'indeterminate'The controlled checked state of the checkbox. | — |
| defaultChecked# | boolean | 'indeterminate'The initial checked state when uncontrolled. | — |
| onCheckedChange# | (checked: boolean | 'indeterminate') => voidCallback fired when the checked state changes. | — |
| disabled# | booleanWhether the checkbox is disabled and cannot be interacted with. | false |
| required# | booleanWhether the checkbox is required in a form. | — |
| name# | stringThe name attribute for form submission; creates a hidden input if provided. | — |
| value# | stringThe value submitted in the form when the checkbox is checked. | 'on' |
| color# | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'The color variant controlling the checked/indeterminate state background and border. | 'primary' |
| asChild# | booleanPass a custom element as the checkbox instead of rendering the default button. | — |
| className# | stringAdditional CSS classes merged with the default styling. | — |
| onClick# | (event: React.MouseEvent<HTMLButtonElement>) => voidCallback fired on click; toggles checked state unless disabled. | — |
| onKeyDown# | (event: React.KeyboardEvent<HTMLButtonElement>) => voidCallback fired on key down; Space toggles the checkbox, Enter is prevented. | — |
CheckboxIndicator
A compound component that displays the check or indeterminate icon inside the checkbox, conditionally rendered based on state.
| Prop | Type | Default |
|---|---|---|
| forceMount# | booleanWhen true, the indicator is always rendered; when false, it only renders when checked is truthy. | — |
| asChild# | booleanPass a custom element to replace the default span indicator container. | — |
| className# | stringAdditional CSS classes merged with default animation and layout styles. | — |
Keyboard interactions
Adheres to the WAI-ARIA design pattern .
| Key | Description |
|---|---|
| Space | Toggles the checkbox. |
Source code
If you didn't find what you need here, read the component implementation .