Todos los componentes (204)
Campo numérico
Campos · NumberField
Qué es y cuándo usarlo
Un número con formato del idioma: en es-ES un importe se escribe y se lee 1234,56 €, con coma decimal. Con botones va como el selector de cantidad, − 12 +: el menos delante, el más detrás y la cifra en medio.
Cuándo usarlo
- Importes, porcentajes, unidades, pesos: todo lo que se suma, se compara o tiene mínimo y máximo.
format:currency(euros),percent(se guarda en tanto por uno:0.21se ve como21 %),integerodecimal.formatOptionspara afinarlo (otra moneda, decimales fijos).withoutStepsen columnas de importes o cuando el paso no tiene sentido (un peso con decimales): sin botones, la cifra va a la derecha.
Cuándo no
- Un número que no se opera (un teléfono, un código postal, un DNI): eso es texto,
TextFieldo sus campos compuestos. - Una cantidad de carrito:
QuantityPicker, más compacto.
Teclado: es un campo de texto con teclado decimal, no un <input type="number">: la rueda del ratón no cambia la cifra. Flecha arriba y abajo suben y bajan un paso, Re Pág y Av Pág diez pasos, e Inicio y Fin llevan al mínimo y al máximo si los hay; se respetan minValue, maxValue y step. Lo escrito se ajusta al formato al salir del campo o con Intro. Los botones no están en el orden del Tab: con el teclado se usan las flechas.
Accesibilidad: la etiqueta es obligatoria. La ayuda y el error se leen como descripción del campo. Con el dedo, la caja pasa a 48 px, los botones a 44 y la letra a 16 px, para que el iPhone no amplíe la página.
Aspecto fino: no tiene variables propias. El alto, el relleno, la letra, el radio, el fondo y el borde salen de las del campo (--amset-field-*), y los botones de subir y bajar se dimensionan desde --amset-field-height, así que cambiándola se mueven con la caja. Para retocar solo este campo, la regla va sobre .amset-field del contenedor que lo envuelve, no sobre :root.
Contexto: va dentro de LocaleProvider (o de AmsetProvider), que decide el formato.
Cómo se ve
<NumberField label="Unidades" format="integer" defaultValue={3} minValue={0} />
<NumberField label="Importe" format="currency" defaultValue={1234.5} minValue={0} step={0.01} />
<NumberField label="IVA" format="percent" defaultValue={0.21} minValue={0} maxValue={1} step={0.01} />Props
Se importa con import { NumberField } from '@amset/ui'. Las obligatorias van marcadas.
| Prop | Tipo | Para qué sirve |
|---|---|---|
labelobligatoria | string | — |
className | string | — |
decrementAriaLabel | string | — |
defaultValue | number | — |
disabled | boolean | — |
error | string | — |
format | NumberFormat | Formato del numero. `currency` usa euros; para otra divisa, pasa `formatOptions` directamente. |
formatOptions | Intl.NumberFormatOptions | Las opciones de `Intl.NumberFormat`, si el formato de arriba no llega. |
hiddenLabel | boolean | La etiqueta solo para el lector de pantalla. Para cuando el campo va dentro de algo que ya se explica solo (una celda de tabla, un grupo de filtros), nunca para ahorrar espacio. |
hint | string | — |
id | string | — |
incrementAriaLabel | string | Como se llaman las dos flechas para un lector de pantalla. Por defecto «Subir» y «Bajar», que valen para una cantidad suelta; en un campo que vive entre otros -«Subir la cantidad de camisetas»- el nombre generico se repite tantas veces como campos haya y deja de distinguir. |
inputRef | Ref<HTMLInputElement> | El `<input>` de verdad, para enfocarlo o seleccionar su texto desde fuera. |
invalid | boolean | — |
maxValue | number | — |
minValue | number | — |
name | string | Con que nombre viaja en un formulario nativo. Lo que se envia es el numero (`10.5`, `0.21`), con punto y sin formato, y vacio si no hay cifra: no el texto que se ve (`10,5`, `21 %`), que un servidor no puede leer. |
onChange | (value: number) => void | Avisa de la cifra nueva. Si se vacia el campo, avisa con `NaN`: el «sin valor» de siempre. |
onChangeEvent | (event: ChangeEvent<HTMLInputElement>) => void | El evento del `<input>` en cada tecla (AMS-735). Ojo: `e.target.value` es el TEXTO que se esta escribiendo («1.234,5»), no el numero; el numero lo da `onChange`, cuando lo escrito ya vale. |
placeholder | string | — |
readOnly | boolean | — |
required | boolean | — |
size | "sm" | "md" | "lg" | — |
step | number | — |
value | number | — |
variant | FieldVariant | — |
withoutSteps | boolean | Quita los botones de bajar y subir, que van a los lados del valor (`− 12 +`) con la cifra centrada. Sin ellos la cifra va a la derecha, que es como cuadran los importes en columna. El teclado funciona igual. |
Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.
En el banco de pruebas
Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: