Checkbox
Una caja para marcar: sí o no para una cosa, o varias opciones en un grupo.
En esta página
Playground
Estado
Fondo
<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
<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
Hacer y no hacer
Do
Caja y texto clicables juntos, y el check en tinta.
Don’t
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. |