# Checkbox

Checkbox is a neobrutalist React component from Cruise UI. A native checkbox, restyled: square box, --primary when checked.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/checkbox
```

Import: `import { CruiseCheckbox } from "@/components/cruise/checkbox";`

## When to use

Turning one option on or off in a form, or picking several from a list.

## When not to

A setting that applies straight away (use a Switch). One choice from many (use a Radio group).

## Example (React)

```tsx
import { CruiseCheckbox } from "@/components/cruise/checkbox";

export default function CheckboxExample() {
  return (
    <div className="flex flex-col">
      <CruiseCheckbox label="Select all extras" indeterminate />
      <CruiseCheckbox label="Gift wrapping" defaultChecked />
      <CruiseCheckbox label="Birthday card" />
      <CruiseCheckbox label="Same-day delivery (sold out)" disabled />
    </div>
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<label class="check"><input type="checkbox" class="checkbox" name="terms"> <span>I agree to the terms</span></label>
<label class="check"><input type="checkbox" class="checkbox" name="news" checked> <span>Send me order updates</span></label>
```

## Props: CruiseCheckbox

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `ReactNode` | — | Visible label; clicking it toggles the box (spec A5 Checkbox). |
| `indeterminate?` | `boolean` | `false` | "Some of a group" state: an ink dash. |

Also takes every native `<input>` attribute.

## Accessibility

- Native input inside its <label>, so the whole row is the 44px target.
- Indeterminate is set with input.indeterminate = true.