Checkbox
Checkboxes allow users to select one or more options from a set. They support hint text, error states, and disabled states.
Default
A standard checkbox with a label and hint text.
Error
Use error to show a validation message below the checkbox.
You must accept to continue.
Disabled
Add disabled to prevent interaction. Both checked and unchecked states are shown.
Usage
Always provide a label for accessibility. Use hint for helper text and error for validation messages — only one will show at a time, with error taking priority.
Explore the Checkbox component by adjusting its properties below. Changes are reflected in the live preview and code snippet in real time.
Properties
Checked
Disabled
<Checkbox label="Enable greenhouse mode" hint="Applies chlorophyll accents across interactive elements." onChange={(e) => {}} />