# Checkbox

> A box for choices applied on submit and for selecting rows. Supports an indeterminate state for "some selected".

Source: https://docs.nasaqui.com/components/checkbox

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/checkbox.json
```

A 16px box with a 24px hit area. Use it for choices that are applied when a form is submitted, and for row selection.
`indeterminate` draws a dash and reports `aria-checked="mixed"`: use it on a "select all" box when only
some items are selected.

## When to use

- Form options that take effect on submit ("Email me a copy").
- Selecting items in a list or table (DataTable uses it).

## When not to use

- A setting that takes effect immediately: use `Switch`.
- Picking one of several options: use a radio group or a select.

## Import

```tsx
import { Checkbox } from "@fadymondy/nasaq/web";
```

## Quick start

```tsx
<Field className="flex-row items-center gap-2">
  <Checkbox id="copy" defaultChecked />
  <FieldLabel htmlFor="copy">Email me a copy</FieldLabel>
</Field>
```

Or wrap it in a `<label>`: `<label className="flex items-center gap-2"><Checkbox /> Email me a copy</label>`.

## API

All Base UI `Checkbox.Root` props, including:

| Prop | Type | Notes |
| --- | --- | --- |
| `checked` / `defaultChecked` | `boolean` | Controlled or uncontrolled. |
| `onCheckedChange` | `(checked: boolean) => void` | |
| `indeterminate` | `boolean` | Dash; `aria-checked="mixed"`. |
| `disabled`, `required`, `name`, `value` | | Form behaviour, including a hidden input for native forms. |

## Accessibility

- Renders `role="checkbox"` with `aria-checked`. Space toggles it.
- Always give it a name: a `<label>`, a `FieldLabel`, or `aria-label` when it stands alone (as in a table row).
- The hit area is 24px, although the box is 16px.

## RTL & i18n

Nothing to mirror. The check and dash glyphs are symmetric.

## Styling & tokens

Unchecked: `border-nq-line-strong` on `bg-card`. Checked or indeterminate: `bg-primary`. Focus ring: `nq-focus`.
Radius 4px. `className` merges onto the root.

## Related

`switch` (immediate settings), `field`, `data-table` (row selection).

## Lab

https://docs.nasaqui.com/?path=/docs/components-forms-checkbox--docs

## Code

### React

```tsx
<Field className="flex-row items-center gap-2">
  <Checkbox id="copy" defaultChecked />
  <FieldLabel htmlFor="copy">Email me a copy</FieldLabel>
</Field>
```

### shadcn

```tsx
<Field className="flex-row items-center gap-2">
  <Checkbox id="copy" defaultChecked />
  <FieldLabel htmlFor="copy">Email me a copy</FieldLabel>
</Field>
```

### Vue

```vue
<script setup lang="ts">
import { NqCheckbox, NqField, NqFieldLabel } from "@fadymondy/nasaq/vue";
</script>

<template>
  <NqField class="flex-row items-center gap-2">
    <NqCheckbox id="copy" default-checked />
    <NqFieldLabel for="copy">Email me a copy</NqFieldLabel>
  </NqField>
</template>
```

### Blade

```blade
<x-nq::field class="flex-row items-center gap-2">
    <x-nq::checkbox id="copy" checked />
    <x-nq::field.label for="copy">Email me a copy</x-nq::field.label>
</x-nq::field>
```

### HTML + Alpine

```html
<div data-slot="field" x-data="nqField(false)" x-modelable="invalid" x-id="['nq-field']"
         data-valid     class="flex flex-row items-center gap-2">
    <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(true, false)" x-modelable="checked" x-bind="root"
    aria-checked="true"
     data-checked                 id="copy" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
    <label data-slot="field-label"  for="copy" class="text-label text-foreground data-disabled:opacity-50">Email me a copy</label>
</div>
```