ComponentsForm
Checkbox
An accessible checkbox for toggling a boolean value. Built on Radix UI.
Default
Checked
Indeterminate
Disabled
Installation
npx visor add checkboxThis copies two files into your project:
components/ui/checkbox/checkbox.tsx— the componentcomponents/ui/checkbox/checkbox.module.css— the styles
Usage
import { Checkbox } from '@/components/ui/checkbox/checkbox';
import { Label } from '@/components/ui/label/label';
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms and conditions</Label>
</div>API Reference
CheckboxProps
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | "indeterminate" | — | Controlled checked state. |
defaultChecked | boolean | — | Default checked state for uncontrolled usage. |
onCheckedChange | (checked: boolean | "indeterminate") => void | — | Callback when the checked state changes. |
disabled | boolean | false | Disables the checkbox. |
required | boolean | false | Marks the checkbox as required for form validation. |
className | string | — | Additional CSS class names to merge onto the element. |
The component also accepts all standard <button> HTML attributes (Radix renders checkbox as a button).
Accessibility
- Built on
@radix-ui/react-checkboxfor full WAI-ARIA compliance - Renders as
role="checkbox"witharia-checkedreflecting the current state (including"mixed"for indeterminate) - Always pair with a
<Label>using matchingid/htmlForfor screen reader association - Keyboard: Space toggles the checkbox; Tab moves focus to/from it
- Disabled state sets
aria-disabled="true"and removes interaction