Checkbox
A checkbox component supporting checked, unchecked, and indeterminate states. Built on Radix UI primitives with customizable sizing. Perfect for form inputs and selection lists.
Installation
Import
Usage
Use Checkbox for binary choices and multiple selections. Use indeterminate state for 'select all' scenarios. Always pair with descriptive labels. Use appropriate sizes for your form layout. Group related checkboxes visually. For form integration with validation and error handling, use CheckboxField which extends Checkbox and integrates with Conform forms.
Design Guidelines
Maintain consistent checkbox sizing throughout your application. Use appropriate sizes for your form density. Group related checkboxes with clear visual hierarchy. Provide clear labels that describe the action or choice.
Basic Usage
Simple checkbox with label
Signup Form with Terms
Complete signup form with required terms acceptance and optional newsletter subscription
Checkbox Sizes
Demonstrating different checkbox sizes in a form
Email Preferences Form
Email subscription preferences with multiple checkboxes
CheckboxField with Validation
CheckboxField automatically displays validation errors from form schema
CheckboxField
CheckboxField extends Checkbox with form integration, labels, error handling, and validation support. Use CheckboxField when building forms with Conform. extends Checkbox. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
field | FieldMetadata<CheckedValue> | — | Conform field metadata for form integration and validation |
label | string | React.ReactNode | — | Label text displayed next to the checkbox |
onChange | (value: CheckedValue) => void | — | Callback fired when checked state changes |
labelProps | React.LabelHTMLAttributes<HTMLLabelElement> | — | Additional props for the label element |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
API Reference
Comprehensive API documentation for all exports and utilities. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
checked | boolean | "indeterminate" | — | Controlled checked state. Use true for checked, false for unchecked, or "indeterminate" for indeterminate state |
defaultChecked | boolean | — | Uncontrolled default checked state |
onCheckedChange | (checked: boolean) => void | — | Callback fired when checked state changes |
checkboxSize | "sm" | "md" | "lg" | "xl" | "md" | Size of the checkbox |
disabled | boolean | false | Whether the checkbox is disabled |
value | "on" | "off" | "indeterminate" | — | Value for form submission |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
Accessibility
Accessibility features and considerations
Checkbox includes proper ARIA attributes. Always associate with labels using htmlFor/id. Screen readers announce checked state. Keyboard accessible with Space to toggle. Use indeterminate state appropriately for accessibility.