# Checkbox

> Sí o no, o varios de una lista. Con estado indeterminado.

```tsx
import { Checkbox } from "sebs7n-ui/checkbox"
```

## Ejemplos

### Con etiqueta, indeterminado y deshabilitado

```tsx
import { Checkbox } from "sebs7n-ui/checkbox"
import { Label } from "sebs7n-ui/label"
import { useId } from "react"

function Basico() {
  const a = useId()
  const b = useId()
  const c = useId()
  return (
    <div className="flex flex-col gap-3">
      <div className="flex items-center gap-2">
        <Checkbox defaultChecked id={a} />
        <Label htmlFor={a}>Enviar copia por email</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id={b} indeterminate />
        <Label htmlFor={b}>Seleccionar todo (3 de 8)</Label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox disabled id={c} />
        <Label htmlFor={c}>Firmar digitalmente (requiere certificado)</Label>
      </div>
    </div>
  )
}
```

## Props

### Checkbox

Hereda las props de `Checkbox.Root`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

## Teclado

| Tecla | Qué hace |
|---|---|
| Espacio | Alterna. |
| Tab | Entra y sale. |

## Accesibilidad

- Necesita `Label` asociado o `aria-label`: la caja sola no dice nada.
- `indeterminate` emite `aria-checked="mixed"`, que es lo que corresponde para un «seleccionar todo» parcial.

## Reglas de uso

- Varias opciones no excluyentes. Una sola opción excluyente con efecto inmediato es un `Switch`.
- El checkbox de «seleccionar todo» de una tabla va `indeterminate` cuando hay selección parcial.

## Relacionados

[switch](/docs/components/switch.md) · [radio-group](/docs/components/radio-group.md) · [label](/docs/components/label.md)