Switch
Un interruptor de encendido/apagado para una configuración, con el estado escrito al lado. Se aplica cuando la persona guarda, como cualquier campo.
En esta página
Playground
Estado
Fondo
<label class="feitio-switch" data-on="Encendido" data-off="Apagado"><input type="checkbox" role="switch">Avisos por correo<span class="state">Apagado</span></label>Cuándo usarlo
- Para activar o desactivar una configuración en una página de ajustes: recordatorios, una notificación, una función.
Cuándo no usarlo
- Para aceptar algo (términos, permisos): casilla de verificación.
- Para elegir entre opciones: Radios o SegmentedControl.
Ejemplos
En un formulario de configuración
El interruptor cambia el estado escrito inmediatamente, pero la configuración solo se aplica cuando la persona guarda; la retroalimentación aparece en el formulario.
Mostrar código
<label class="feitio-switch">
<input type="checkbox" role="switch" name="lembretes" checked>
Lembretes do dia
<span class="state">Ligado</span>
</label>Estados
Accesibilidad
- Es un cuadro de verificación con
role="switch": los lectores de pantalla anuncian "encendido" o "apagado". - El estado también se escribe al lado: la posición del punto no es suficiente.
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-switch" | sobre el <label> | El interruptor, el texto y el estado. |
role="switch" | en el input | Los lectores de pantalla anuncian encendido o apagado. |
class="state" | el estado | "Encendido" o "Apagado", en palabras. |