# Checkbox
Un checkbox permite seleccionar múltiples opciones de un grupo o activar y desactivar un valor individual.
```tsx
import { Checkbox } from "@fluentui/react-components";
```
## Tipos
### Individual
Un solo checkbox aislado se usa para confirmar una decisión binaria opcional, como aceptar términos o suscribirse a una novedad. Si la acción es central para continuar, considera otro control.
```tsx
import { Checkbox } from "@fluentui/react-components";
```
### Grupo
Cuando varias opciones del mismo conjunto pueden seleccionarse de forma independiente, agrúpalas bajo un mismo label. El label del grupo debe describir qué tienen en común las opciones.
```tsx
import { Checkbox, Label } from "@fluentui/react-components";
```
## Estados
### Mixed
El estado mixed (indeterminate) se usa en un checkbox padre cuando algunas de sus opciones hijas están seleccionadas y otras no. Comunica que la decisión es parcial sin perder el control de seleccionar todo o nada.
```tsx
import { Checkbox } from "@fluentui/react-components";
<>
```
### Deshabilitado
- Usa disabled cuando la opción no aplica en el contexto actual pero podría aplicar en otro.
- Evita ocultar opciones en lugar de deshabilitarlas si su presencia ayuda a entender el sistema.
- Si la razón del disabled no es obvia, explica el motivo cerca del control.
## Layout
### Orientación
- Vertical por defecto: facilita el escaneo y soporta labels de cualquier longitud.
- Horizontal solo para grupos cortos de 2 a 3 opciones con labels breves.
- Mantén alineación de checkbox y label estable cuando el label ocupa más de una línea.
### Densidad
- Usa el tamaño medium (por defecto) en formularios y panels.
- Usa large cuando la opción tiene impacto financiero o legal y requiere mayor presencia.
- Mantén tamaño consistente dentro del mismo grupo.
## Accesibilidad
### Label asociado
- Todo checkbox debe tener un label visible o un aria-label cuando el contexto no permite mostrar texto.
- El label completo del checkbox debe ser clickeable para activar el control.
- El grupo se debe envolver en un contenedor con role="group" y aria-labelledby apuntando al título del grupo.
### Teclado
- Tab navega entre checkboxes; Espacio alterna el estado.
- No agrupes checkboxes con flechas: usa Tab para mantener la convención de selección múltiple.
- El estado mixed se anuncia automáticamente cuando aria-checked="mixed".
## Contenido
### Labels
- Empieza con la palabra clave: el sujeto u objeto de la opción.
- Evita formularlos como pregunta: no escribas “¿Recibir alertas?”, escribe “Recibir alertas”.
- No uses la negación: prefiere “Compartir actividad” en lugar de “No compartir actividad”.