# Checkbox

One bare `<input type=checkbox class="cb">`: 18px, navy when checked, with an indeterminate dash for a partly selected table header.

- **Group:** Form controls · **family:** `form-controls` · **shadcn:** Checkbox
- **Build:** shadcn `Checkbox` (Radix).
- **In apps/admin today:** `ui/checkbox.tsx` exists. Restyle to 18px, 1.5px edge, navy fill.
- **Client component:** yes. 

## Content rules

- Label states the positive ("Show on the storefront").

## Do

- Make the label clickable.

## Don't

- Use a checkbox for an instant setting; that is a Switch.

## Motion

- Fill and edge on `--motion-hover`; halo on `--motion-focus`.

## Accessibility

- **Keyboard:** Space toggles.
- **ARIA:** Native input, or Radix `Checkbox` (`role="checkbox"`, `aria-checked="mixed"` for indeterminate).
- **Focus:** `--focus-ring` halo on the box.

## Tokens

`--input` `--r-chip` `--background` `--motion-hover` `--motion-focus` `--input-hover` `--primary` `--focus-ring` `--destructive` `--muted` `--border` `--muted-foreground`

## Files

`checkbox.html` live specimen · `checkbox.css` kit rules · `checkbox.d.ts` props · full page: `docs/components/checkbox/` (phone: `m/`).