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. packages.composedComponents.extends Checkbox. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2

packages.propsTable.headers.name	packages.propsTable.headers.type	packages.propsTable.headers.default	packages.propsTable.headers.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`	—	packages.commonProps.className.description
`asChild`	`boolean`	`false`	packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2

packages.sections.api

Component props and API reference 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. For detailed documentation and examples, see the Style Props documentation.

packages.propsTable.headers.name	packages.propsTable.headers.type	packages.propsTable.headers.default	packages.propsTable.headers.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`	—	packages.commonProps.className.description
`asChild`	`boolean`	`false`	packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2

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.

packages.title