Partes del campo

Código

Copiar el marcado

.luz-field envuelve la etiqueta, el control, la pista y el error. aria-describedby une la pista y el error al control:

<div class="luz-field">
  <label class="luz-field__label luz-field__label--required" for="slug">Slug</label>
  <input class="luz-input luz-input--error" id="slug" type="text" required aria-invalid="true" aria-describedby="slug-hint slug-error">
  <div class="luz-field__helper" id="slug-hint">Letters, numbers and dashes.</div>
  <div class="luz-field__error" id="slug-error"><span class="u-sr-only">Error: </span>Use letters, numbers and dashes only.</div>
</div>

Variantes y opciones

• .luz-field__label: la etiqueta visible. --required añade detrás un « *» rojo.
• .luz-field__helper: la pista, bajo el control. .luz-field__error: el error, en el color de peligro.
• .luz-input--error con aria-invalid="true": un subrayado de peligro de 2 px en el control.

Cómo funciona

La etiqueta da nombre al control mediante for e id, y un clic en ella lleva el foco al control. LUZ no marca un campo como no válido por ti: añade la clase de error, aria-invalid y el mensaje cuando falle tu validación.

Sin JavaScript

La etiqueta, la pista y el error son texto de tu HTML, así que se muestran sin script. El navegador sigue comprobando required y el tipo al enviar el formulario.

Teclado y ARIA

• Una etiqueta y un mensaje no reciben el foco y no tienen teclas propias.
• Escribe «Error: » antes del texto del error, oculto con .u-sr-only si quieres, y enumera la pista y el error en aria-describedby.

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

Diseño

Cuándo usarlo

Usa una etiqueta en cada control, una pista cuando el lector necesite el formato o el motivo, y un error cuando falle una comprobación.

• La etiqueta siempre se ve: permanece en pantalla mientras el lector escribe.
• El error va junto al campo al que se refiere, con palabras.

Cuándo no usarlo

No sustituyas una de estas partes por otra ni ocultes ninguna.

• Un texto de ejemplo (placeholder) no es una etiqueta: desaparece cuando el lector escribe.
• Un color o un borde solos no son un error: di qué está mal. No muestres el error solo en un aviso emergente: desaparece.

Qué hacer y qué no

Cómo escribir el contenido

• La etiqueta es un sustantivo corto, con mayúscula solo al inicio: «Nombre del proyecto».
• La pista indica el formato o por qué lo pides.
• El error dice qué está mal y cómo corregirlo. Si marcas los campos obligatorios con «*», explica una vez, sobre el formulario, qué significa.

Contraste y foco

Compartido con las demás partes del campo: contraste y foco de las partes del campo.

Tokens que usa

Compartido con las demás partes del campo: tokens de las partes del campo.

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

Código

Copiar el marcado

Un <fieldset> nativo cuyo primer hijo es un <legend>:

<fieldset class="luz-fieldset">
  <legend>Shipping address</legend>
  <div class="luz-field">
    <label class="luz-field__label" for="street">Street</label>
    <input class="luz-input" id="street" type="text">
  </div>
  <div class="luz-field">
    <label class="luz-field__label" for="city">City</label>
    <input class="luz-input" id="city" type="text">
  </div>
</fieldset>

Variantes y opciones

• disabled en el grupo desactiva todos los controles que contiene.
• role="group" con aria-labelledby en un <div> da nombre a un grupo sin borde, como hace el ejemplo de la casilla de verificación.

Cómo funciona

Un <fieldset> nativo estilizado por components/form.css: un borde de 1 px, esquinas suaves y el fondo del campo. El <legend> es un texto pequeño en mayúsculas.

Sin JavaScript

No cambia nada: el grupo y su leyenda son nativos y no necesitan script.

Teclado y ARIA

• Un grupo no recibe el foco; Tab recorre los controles que contiene.
• La leyenda da nombre al grupo: el navegador expone un fieldset como un grupo con el nombre de su leyenda.

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

Diseño

Cuándo usarlo

Usa un grupo de campos para controles que responden juntos a una sola pregunta.

• Un conjunto de botones de opción o de casillas, o una dirección.
• Pon la leyenda primero y mantenla corta.

Cuándo no usarlo

Un grupo de campos es un grupo con nombre, no una caja para maquetar.

• Un solo control: su etiqueta basta.
• Espaciado o columnas: los objetos de maquetación, o-stack u o-grid. No envuelvas cada sección de un formulario.

Qué hacer y qué no

Cómo escribir el contenido

• La leyenda es un sustantivo o una pregunta: «Dirección de envío», «Plan».
• Sin dos puntos al final: el estilo añade el espacio.
• No repitas la leyenda en cada etiqueta.

Contraste y foco

Compartido con las demás partes del campo: contraste y foco de las partes del campo.

Tokens que usa

Compartido con las demás partes del campo: tokens de las partes del campo.

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