Core · Campos de formulario
Valores
Mostrar o calcular un valor en lugar de recoger texto: medidor y resultado.
Medidor
Una barra para un valor dentro de un rango conocido, como el almacenamiento usado, dibujada junto a su cifra.
Código
Copiar el marcado
Un <meter> nativo con su rango. El texto interior es para los navegadores que no lo dibujan:
<div class="luz-field">
<label class="luz-field__label" for="storage">Storage used, 6 of 10 GB</label>
<meter class="luz-meter" id="storage" min="0" max="10" value="6">6 of 10 GB</meter>
</div>Variantes y opciones
min,max,value: el rango y la cifra.- No uses
low,highnioptimum: la barra es siempre del color de marca, nunca verde ni roja.
Cómo funciona
Un <meter> nativo dibujado por components/meter.css como una barra de 8 px: un relleno del color de marca sobre un riel atenuado con el color de borde del campo. La barra es una imagen de un número que ya es texto. Consulta la página de Medidor para tablas y listas.
Sin JavaScript
La barra se dibuja y la cifra está en la etiqueta. No cambia nada sin tu script, que es quien fija value.
Teclado y ARIA
- Un medidor no recibe el foco y no tiene teclas.
- Pon la cifra y la unidad en la etiqueta, u oculta la barra con
aria-hidden="true"cuando la cifra esté a su lado.
El contraste y el foco están en la pestaña Diseño.
Diseño
Cuándo usarlo
Usa un medidor para un valor dentro de un rango conocido: una proporción, un recuento frente a un máximo.
- Almacenamiento usado, plazas ocupadas, una nota sobre diez.
- Escribe la cifra junto a la barra: la barra sola no es un número.
Cuándo no usarlo
Un medidor es un indicador de nivel, no una tarea en curso.
- Cuánto ha avanzado una tarea: progreso.
- Un valor que fija el lector: un control deslizante.
Qué hacer y qué no
Cómo escribir el contenido
- Etiquétalo con la cifra y su unidad: «Almacenamiento usado, 6 de 10 GB».
- Di qué se mide, no qué aspecto tiene la barra.
- No te apoyes nunca en el color de la barra: es el color de marca en todos los estados.
Contraste y foco
Compartido con los demás controles de valores: contraste y foco de los valores.
Tokens que usa
Compartido con los demás controles de valores: tokens de los valores.
El teclado y ARIA están en la pestaña Código.
Resultado
El resultado de un cálculo o de un control, como el número junto a un control deslizante.
Código
Copiar el marcado
Un <output> nativo; for enumera los ids de los controles de los que procede:
<p>Total: <output class="luz-output" id="total" for="qty price">12</output> seats</p>Variantes y opciones
.luz-output: la tipografía de la interfaz, el color de marca, cifras de igual ancho, de al menos 2,5 em de ancho y alineadas al final.- Un
<output>sin clase: una pequeña ficha en la tipografía monoespaciada.
Cómo funciona
Un <output> nativo. Tu script escribe su value; LUZ no calcula. Un resultado no se envía con el formulario y su rol ARIA implícito es status.
Sin JavaScript
El resultado muestra el valor escrito en el HTML. Nada se recalcula sin tu script.
Teclado y ARIA
- Un resultado no recibe el foco y no tiene teclas.
- Únelo a sus orígenes con
fory pon la unidad en el texto que lo rodea.
El contraste y el foco están en la pestaña Diseño.
Diseño
Cuándo usarlo
Usa un resultado para un valor que calcula tu página o que fija un control, mostrado como texto.
- El número junto a un control deslizante, un total, un resultado.
- Escribe la unidad a su lado: «12 plazas».
Cuándo no usarlo
Un resultado muestra un valor; no lo recoge.
- Un valor que escribe el lector: un campo numérico o de texto.
- Texto que nunca cambia: un párrafo o un «span».
Qué hacer y qué no
Cómo escribir el contenido
- Pon la cifra en el resultado y la unidad en el texto que lo rodea.
- Etiqueta lo que se cuenta: «Plazas», «Total».
- Mantén el texto corto: un resultado es para un valor, no para una frase.
Contraste y foco
Compartido con los demás controles de valores: contraste y foco de los valores.
Tokens que usa
Compartido con los demás controles de valores: tokens de los valores.
El teclado y ARIA están en la pestaña Código.
Contraste y foco de los valores
La etiqueta es texto secundario de la página; la barra y la cifra deben distinguirse sobre ella.
| Parte | Color sobre el fondo | Claro | Oscuro | Alto contraste | Mínimo |
|---|---|---|---|---|---|
Etiqueta | --luz-text-secondary sobre --luz-surface-page | 6,2:1 | 7,5:1 | 19,3:1 | 4,5:1 |
Relleno del medidor | --luz-brand-primary sobre --luz-surface-muted | 5,6:1 | 7,7:1 | 13,5:1 | 3:1 |
Borde del medidor | --luz-input-border sobre --luz-surface-page | 3,7:1 | 4,2:1 | 21,0:1 | 3:1 |
Cifra del resultado | --luz-brand-primary sobre --luz-surface-page | 5,6:1 | 7,7:1 | 14,1:1 | 4,5:1 |
Resultado sin clase | --luz-text-primary sobre --luz-surface | 16,5:1 | 14,0:1 | 21,0:1 | 4,5:1 |
Medido a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo requerido es el de WCAG 2.2 AA: 4,5:1 para texto y 3:1 para anillos de foco, bordes e iconos.
- Foco: un medidor y un resultado no reciben el foco, así que no tienen anillo.
- No depende solo del color: la barra es del color de marca en todos los estados; su cifra es texto.
- Objetivo táctil: ninguno de los dos es un control que el lector pulse.
Tokens de los valores
Los 11 tokens que leen las reglas de estos controles, por familia de tokens. Cada familia enlaza a su página, con los valores de todos los modos.
- Espaciado y tamaños
--luz-space-2xs,--luz-space-xs- Tipografía
--luz-font-mono,--luz-font-sans,--luz-text-md,--luz-text-xs- Radio
--luz-radius-sm
Problemas conocidos
Ninguno conocido.