Checkbox
Checkbox Orientation
Display checkboxes vertically (stacked) or horizontally (in a row).
<CheckboxGrouplabel="Select Fruits"name="fruits"options={[{ value: "apple", label: "Apple" },{ value: "banana", label: "Banana" },{ value: "orange", label: "Orange" },]}value={selectedValues}onChange={setSelectedValues}/>
Checkbox Sizes
Choose from five size options: extra small, small, medium, large, or extra large.
<CheckboxGrouplabel="Select Fruits"name="fruits"options={[{ value: "apple", label: "Apple" },{ value: "banana", label: "Banana" },{ value: "orange", label: "Orange" },]}value={selectedValues}onChange={setSelectedValues}/>
Disabled Checkboxes
Disable individual options or the entire checkbox group.
<CheckboxGrouplabel="Select Fruits"name="fruits"options={[{ value: "apple", label: "Apple" },{ value: "banana", label: "Banana" },{value: "orange",label: "Orange",disabled: true,},]}value={selectedValues}onChange={setSelectedValues}/>
Single Checkbox
Use standalone checkboxes for simple boolean choices.
<Checkboxlabel="I agree to the terms and conditions"checked={agreeToTerms}onChange={setAgreeToTerms}/><Checkboxlabel="Subscribe to newsletter"checked={subscribeNewsletter}onChange={setSubscribeNewsletter}/>
Validation
Required Checkbox
Use the required prop with custom error messages for checkboxes that must be checked.
<Checkboxlabel="I accept the terms and conditions"requirederrorMessage="You must accept the terms to continue"/>
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | undefined | Group label displayed above the checkboxes |
| name | string | required | Name attribute for the checkbox group |
| options | CheckboxOption[] | required | Array of checkbox options (value, label, disabled) |
| value | string[] | [] | Array of selected checkbox values |
| onChange | (value: string[]) => void | undefined | Callback fired when selection changes |
| orientation | "vertical" | "horizontal" | "vertical" | Layout direction of the checkbox group |
| required | boolean | false | Shows asterisk (*) next to label if true |
| disabled | boolean | false | Disables the entire checkbox group (overrides individual option disabled states) |