Checkbox

Accessible checkbox component built with Radix UI

Installation

Install the checkbox component using the shadcn CLI:

npx shadcn@latest add https://tezosx-ui.vercel.app/registry/tezosx/checkbox.json

Examples

Basic

Simple checkbox with label

Accept terms and conditions

<div className="flex items-center space-x-2">
  <Checkbox id="basic" />
  <Label htmlFor="basic">Accept terms and conditions</Label>
</div>

Controlled

Checkbox with controlled state

Unchecked

const [checked, setChecked] = useState(false);

<Checkbox 
  id="controlled" 
  checked={checked}
  onCheckedChange={(checked) => setChecked(checked === true)}
/>
<Label htmlFor="controlled">
  {checked ? "Checked!" : "Unchecked"}
</Label>

Disabled

Disabled checkbox states

Disabled unchecked

Disabled checked

<Checkbox id="disabled-unchecked" disabled />
<Checkbox id="disabled-checked" checked disabled />

Form Example

Checkbox in a complete form

const [termsAccepted, setTermsAccepted] = useState(false);

<form onSubmit={(e) => {
  e.preventDefault();
  alert(`Terms accepted: ${termsAccepted}`);
}}>
  <div className="flex items-start space-x-2">
    <Checkbox 
      id="terms"
      checked={termsAccepted}
      onCheckedChange={(checked) => setTermsAccepted(checked === true)}
      required
    />
    <div className="space-y-1 leading-none">
      <Label htmlFor="terms" className="cursor-pointer">
        I accept the terms and conditions
      </Label>
      <p className="text-sm text-muted-foreground">
        You agree to our Terms of Service and Privacy Policy.
      </p>
    </div>
  </div>
  <Button type="submit" disabled={!termsAccepted}>
    Continue
  </Button>
</form>

Multiple Options

Multiple checkboxes for preferences

Notification Preferences

Email notifications

SMS notifications

Push notifications

const [notifications, setNotifications] = useState({
  email: true,
  sms: false,
  push: true,
});

<div className="space-y-2">
  <div className="flex items-center space-x-2">
    <Checkbox 
      id="email"
      checked={notifications.email}
      onCheckedChange={(checked) => 
        setNotifications({...notifications, email: checked === true})
      }
    />
    <Label htmlFor="email">Email notifications</Label>
  </div>
  {/* ... more checkboxes ... */}
</div>

API Reference

The Checkbox component accepts all props from Radix UI Checkbox plus:

Prop	Type	Default	Description
checked	boolean \| "indeterminate"	-	Controlled checked state
defaultChecked	boolean	-	Uncontrolled default checked state
onCheckedChange	(checked: boolean) => void	-	Callback when checked state changes
disabled	boolean	false	Disable the checkbox
required	boolean	false	Mark as required for form validation
className	string	-	Additional CSS classes

Accessibility

• Built on Radix UI Checkbox for full accessibility support
• Keyboard navigation: Space to toggle, Tab to focus
• Screen reader support with proper ARIA attributes
• Focus visible states for keyboard users
• Use Label component for accessible labels
• Supports indeterminate state for "partially selected" scenarios
• Disabled state properly communicated to assistive technologies