Checkbox

A checkbox input built on Radix UI Checkbox. Supports checked, unchecked, and indeterminate states, with full keyboard accessibility and disabled support.

Built on Radix UI.

✓Checked, unchecked, and indeterminate states
✓Fully keyboard accessible — toggle with Space
✓Controlled and uncontrolled usage
✓Disabled state with visual feedback
✓Integrates with Label via htmlFor/id

Unchecked

import { Checkbox }from "@aetherstack/ui"

checkbox.tsx

"use client"
import { useState } from "react"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

export function CheckboxDemo() {
  const [checked, setChecked] = useState(false)
  return (
    <div className="flex items-center space-x-2">
      <Checkbox
        id="terms"
        checked={checked}
        onCheckedChange={(value) => setChecked(Boolean(value))}
      />
      <Label htmlFor="terms">
        {checked ? "Checked" : "Unchecked"}
      </Label>
    </div>
  )
}

Usage

With label

Unchecked

Disabled

Disabled unchecked

Checkbox group

Build multi-select groups by rendering multiple checkboxes.

Notification preferences

Unchecked

Push notifications

Unchecked

SMS

Indeterminate

Use the indeterminate state for a parent checkbox that represents a partially-selected group.

Select all (partial)

Props

Prop	Type	Default	Description
checked	boolean \| 'indeterminate'	—	Controlled checked state. Pass 'indeterminate' for the partial-selection state.
defaultChecked	boolean	false	Uncontrolled initial checked state.
onCheckedChange	(checked: boolean \| 'indeterminate') => void	—	Callback fired when the checked state changes.
disabled	boolean	false	Prevents interaction and applies reduced opacity.
required	boolean	false	Marks the checkbox as required in a form.
name	string	—	The name of the checkbox for form submission.
value	string	"on"	The value submitted with the form when the checkbox is checked.
className	string	—	Additional class names on the root element.

* Required props

Accessibility

→Uses the native checkbox role — screen readers announce checked/unchecked/indeterminate state automatically.
→Always provide a visible label via Label with matching htmlFor, or aria-label for icon-only checkboxes.
→Space key toggles the checkbox. Tab moves focus.
→The indeterminate state is announced as 'mixed' by screen readers.