# Checkbox: States

> `disabled`, `readOnly`, `indeterminate` and `aria-invalid`. A read-only box keeps its value and stays focusable, but ignores clicks and keys.

Example: https://hextaui.com/docs/checkbox/examples/states
Component docs: https://hextaui.com/docs/checkbox.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/checkbox-states.json
```

This adds `components/examples/checkbox/states.tsx` with the Checkbox component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/checkbox/states.tsx"
import { Checkbox } from "@/components/ui/checkbox"

export function CheckboxStates() {
  return (
    <div className="flex flex-col gap-3 text-sm">
      <label className="flex items-center gap-3">
        <Checkbox disabled />
        Disabled
      </label>
      <label className="flex items-center gap-3">
        <Checkbox disabled defaultChecked />
        Disabled and checked
      </label>
      <label className="flex items-center gap-3">
        <Checkbox readOnly defaultChecked />
        Read-only
      </label>
      <label className="flex items-center gap-3">
        <Checkbox indeterminate />
        Indeterminate
      </label>
      <label className="flex items-center gap-3">
        <Checkbox aria-invalid />
        Invalid
      </label>
      <label className="flex items-center gap-3">
        <Checkbox aria-invalid defaultChecked />
        Invalid and checked
      </label>
    </div>
  )
}
```

## Props in this example

### Checkbox

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultChecked` | `boolean` | `false` |  |
| `indeterminate` | `boolean` | `false` | Shows a dash: neither ticked nor unticked. |
| `disabled` | `boolean` | `false` |  |
| `readOnly` | `boolean` | `false` | Focusable, but the value can’t change. |

## More Checkbox examples

- [Select all](https://hextaui.com/docs/checkbox/examples/select-all.md)
- [Nested groups](https://hextaui.com/docs/checkbox/examples/nested-groups.md)
- [Controlled](https://hextaui.com/docs/checkbox/examples/controlled.md)
- [Form](https://hextaui.com/docs/checkbox/examples/form.md)
- [Sibling label](https://hextaui.com/docs/checkbox/examples/sibling-label.md)
- [Cards](https://hextaui.com/docs/checkbox/examples/cards.md)
- [Long content](https://hextaui.com/docs/checkbox/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/checkbox/examples/rtl.md)