Elección

Código

Copiar el marcado

Una casilla nativa dentro de .luz-check-item, con su etiqueta al lado; .luz-check-group apila varias:

<div class="luz-check-group" role="group" aria-labelledby="notify-label">
  <div class="luz-check-item"><input type="checkbox" id="notify-email" checked><label for="notify-email">Email</label></div>
  <div class="luz-check-item"><input type="checkbox" id="notify-push"><label for="notify-push">Push</label></div>
</div>

Variantes y opciones

• checked: una casilla rellena con una marca de verificación.
• disabled: atenuada, Tab la salta y no se envía.
• required: el navegador detiene el formulario hasta que se marque.

Cómo funciona

Un <input> nativo con appearance: none, redibujado por components/form.css. La etiqueta se une a él con for e id, así que un clic en el texto marca la casilla.

Sin JavaScript

Cada casilla se marca, se desmarca y se envía con su formulario.

Teclado y ARIA

• Tab pasa de una casilla a otra; Espacio marca o desmarca la que tiene el foco.
• Da a un grupo de casillas un nombre que un lector de pantalla lea antes de la primera, como hace la etiqueta en el marcado anterior.

El contraste y el foco están en la pestaña Diseño.

Diseño

Cuándo usarlo

Usa una casilla cuando el lector pueda elegir ninguna, una o varias opciones.

• Un sí o un no que se guarda con un botón: «Envíame un correo sobre las novedades».
• Una lista en la que pueden valer tantas opciones como se quiera.

Cuándo no usarlo

No uses una casilla para elegir una opción entre varias ni para un ajuste que se aplica al instante.

• Una opción entre varias: botones de opción.
• Un ajuste que surte efecto en cuanto cambia: un interruptor.

Qué hacer y qué no

Cómo escribir el contenido

• Escribe la etiqueta de modo que marcada signifique sí: «Envíame un correo sobre las novedades».
• Una línea, con mayúscula solo al inicio y sin punto final.
• Sin negaciones: «No me envíes correos» obliga al lector a desmarcar para decir que sí.

Contraste y foco

Compartido con los demás controles de elección: contraste y foco de la elección.

Tokens que usa

Compartido con los demás controles de elección: tokens de la elección.

El teclado y ARIA están en la pestaña Código.

Código

Copiar el marcado

Los botones de opción con el mismo name forman una sola elección. Un <fieldset> con un <legend> plantea la pregunta:

<fieldset class="luz-fieldset">
  <legend>Plan</legend>
  <div class="luz-check-group">
    <div class="luz-check-item"><input type="radio" name="plan" id="plan-free" checked><label for="plan-free">Free</label></div>
    <div class="luz-check-item"><input type="radio" name="plan" id="plan-team"><label for="plan-team">Team</label></div>
  </div>
</fieldset>

Variantes y opciones

• checked: la opción elegida al principio. Solo una opción de un grupo puede estarlo.
• required en un botón de opción: el navegador detiene el formulario hasta que el grupo tenga respuesta.
• disabled: Tab lo salta y no se envía.

Cómo funciona

Un <input type="radio"> nativo con appearance: none, redibujado por components/form.css: un anillo que se rellena con un punto del color de marca. El navegador forma el grupo con los botones de opción que comparten un name.

Sin JavaScript

Cada grupo funciona y envía su valor elegido con el formulario.

Teclado y ARIA

• Tab entra en el grupo, hasta la opción elegida o la primera, y sale de él. Las teclas de flecha cambian la elección dentro del grupo. Espacio elige la opción que tiene el foco.
• La leyenda da nombre al grupo y cada etiqueta da nombre a su opción.

El contraste y el foco están en la pestaña Diseño.

Diseño

Cuándo usarlo

Usa botones de opción cuando el lector elige exactamente una entre unas pocas opciones y conviene que las vea todas.

• Seis opciones o menos: un plan, una talla, un método de entrega.
• Marca desde el principio la opción que quiere la mayoría, o ninguna cuando la elección deba ser consciente.

Cuándo no usarlo

No uses botones de opción para una lista larga ni para respuestas que no son excluyentes.

• Más de seis opciones: un selector.
• Cualquier número de opciones: casillas. Un único sí o no: una casilla o un interruptor.

Qué hacer y qué no

Cómo escribir el contenido

• La leyenda es la pregunta o un sustantivo: «Plan», «Método de entrega».
• Las opciones son cortas y paralelas, con mayúscula solo al inicio y en un orden que el lector pueda prever.
• Di qué significa cada opción en su etiqueta, no en una pista al lado.

Contraste y foco

Compartido con los demás controles de elección: contraste y foco de la elección.

Tokens que usa

Compartido con los demás controles de elección: tokens de la elección.

El teclado y ARIA están en la pestaña Código.

Código

Copiar el marcado

Una casilla con role="switch" dentro de un <label>; el riel y el pulgar se dibujan después:

<label class="luz-toggle">
  <input class="luz-toggle__input" type="checkbox" role="switch">
  <span class="luz-toggle__track" aria-hidden="true"><span class="luz-toggle__thumb"></span></span>
  <span class="luz-toggle__label">Weekly digest</span>
</label>

Variantes y opciones

• checked: activado. El riel se rellena con el color de marca y el pulgar se desplaza al final.
• disabled: un riel atenuado; Tab lo salta y no se envía.

Cómo funciona

Una casilla nativa, oculta pero con foco, con role="switch". .luz-toggle dibuja el riel y el pulgar; el pulgar se mueve en sentido contrario en texto de derecha a izquierda, y los colores forzados redibujan ambos con los colores del sistema. LUZ no incluye ningún script: un cambio surte efecto cuando tu propio script actúa sobre él.

Sin JavaScript

El interruptor se activa y se desactiva, y se envía con su formulario. Aplicar el cambio al instante es tarea de tu script.

Teclado y ARIA

• Tab lleva el foco al interruptor; Espacio lo activa o lo desactiva.
• La etiqueta es el nombre; role="switch" indica al navegador que está activado o desactivado, no marcado.

El contraste y el foco están en la pestaña Diseño.

Diseño

Cuándo usarlo

Usa un interruptor para un ajuste que se aplica en cuanto cambia, sin botón de confirmación.

• Una preferencia, un modo o una función que está activada o desactivada.
• Nombra el ajuste en la etiqueta, de modo que activado signifique que está en marcha.

Cuándo no usarlo

No uses un interruptor para una elección que espera a un botón.

• En un formulario que se envía con un botón: una casilla.
• Una opción entre varias: botones de opción.

Qué hacer y qué no

Cómo escribir el contenido

• Nombra el ajuste: «Perfil público», «Resumen semanal».
• No escribas «Activado» ni «Desactivado» en la etiqueta: el interruptor ya lo muestra.
• Sin negaciones: «Ocultar mi perfil» hace que activado signifique desactivado.

Contraste y foco

Compartido con los demás controles de elección: contraste y foco de la elección.

Tokens que usa

Compartido con los demás controles de elección: tokens de la elección.

El teclado y ARIA están en la pestaña Código.

Código

Copiar el marcado

Un select sin clase no necesita ninguna. .luz-select añade la lista abierta estilizada, donde el navegador puede dibujarla:

<div class="luz-field">
  <label class="luz-field__label" for="country">Country</label>
  <select class="luz-select" id="country" name="country">
    <option value="">Select a country</option>
    <option value="de">Germany</option>
    <option value="es">Spain</option>
  </select>
</div>

Variantes y opciones

• aria-invalid="true": un borde de peligro más grueso; acompáñalo del texto del error.
• disabled: texto desactivado y un borde discontinuo.
• multiple, size: una lista que permanece abierta, con borde completo y sin flecha.
• <optgroup label>: un conjunto de opciones con nombre.

Cómo funciona

Un <select> nativo estilizado por components/select.css en dos capas: la caja cerrada en todos los navegadores y la lista abierta dentro de @supports (appearance: base-select). La flecha sigue el color del texto y pasa a la izquierda en texto de derecha a izquierda.

Sin JavaScript

No cambia nada: el selector es un elemento nativo y LUZ no le añade ningún script.

Teclado y ARIA

• Tab lleva al selector. Enter o Espacio abre la lista, Escape la cierra y las flechas arriba y abajo recorren las opciones.
• Dale un <label for> visible y ningún rol. Para un error, pon aria-invalid="true" y haz que aria-describedby apunte al texto.

El contraste y el foco están en la pestaña Diseño.

Diseño

Cuándo usarlo

Usa un selector cuando el lector deba elegir una opción de una lista larga cuya respuesta ya conoce.

• Un país, un año, una zona horaria: más de seis opciones y una sola respuesta.
• Las opciones son cortas y el lector puede recorrerlas en orden.

Cuándo no usarlo

Un selector oculta las opciones hasta que el lector lo abre, y a algunas personas les resulta difícil. La regla de las seis opciones es propia de LUZ.

• Seis opciones o menos: botones de opción, para que todas queden a la vista.
• Varias respuestas: casillas. No construyas nunca tu propio cuadro de lista con elementos <div>.

Qué hacer y qué no

Cómo escribir el contenido

• La etiqueta dice qué elegir, con un sustantivo: «País», no «Seleccione por favor».
• La primera opción es una indicación con valor vacío, para que un campo obligatorio no quede respondido por defecto.
• Con mayúscula solo al inicio y en un orden que el lector pueda prever, como el alfabético.

Contraste y foco

Compartido con los demás controles de elección: contraste y foco de la elección.

Tokens que usa

Compartido con los demás controles de elección: tokens de la elección.

El teclado y ARIA están en la pestaña Código.