# Checkbox

Una caja para marcar: sí o no para una cosa, o varias opciones en un grupo.

## Playground

```html
<label class="feitio-choice"><input type="checkbox">Avisar en Discord</label>
```

## Cuándo usarlo

-   Para elegir ninguna, una o varias opciones de una lista.
-   Por sí solo, para aceptar algo.

## Cuándo no usarlo

-   **Opciones mutuamente excluyentes:** Radios.
-   **Activar y desactivar una configuración:** Switch.

## Ejemplos

### Un grupo

Título y nota juntos (`space-1`), las opciones justo debajo (`space-3`), y `space-2` entre opciones. El tick está en tinta: el naranja se mantiene para la acción principal.

Mostrar código

```html
<fieldset class="feitio-fieldset">
  <legend class="feitio-label">Avisar por</legend>
  <span class="feitio-hint">Marque quantos quiser</span>
  <div class="feitio-choices">
    <label class="feitio-choice"><input type="checkbox" name="avisar" value="discord" checked>Discord</label>
    <label class="feitio-choice"><input type="checkbox" name="avisar" value="email">E-mail</label>
  </div>
</fieldset>
```

## Estados

No marcado

Notify a day before

Marcado

Notify a day before

Grupo de errores

Notificar mediante

DiscordE-mail

Pick at least one

Deshabilitado

WhatsApp (soon)

## Hacer y no hacer

Do

Notify a day beforeNotify an hour before

Caja y texto clicables juntos, y el check en tinta.

Don’t

Notify a day beforeNotify an hour before

Los ticks naranjas compiten con el botón de guardar por el naranja.

## Accesibilidad

-   Todo el texto es clicable, no solo la caja.
-   En un grupo, el Fieldset da el título; el error de grupo aparece una vez, debajo de las opciones.

## Atributos

Atributo

Valores

Para qué sirve

`class="feitio-choices"`

alreda de las opciones

`space-2` entre las opciones.

`class="feitio-choice"`

sobre el `<label>`

Caja y texto clickeables juntos.

`checked`, `disabled`

—

Seleccionado; desactivado.

`aria-invalid="true"`

sobre el fieldset

Grupo de error, debajo de las opciones.