Todos los componentes (204)

Campo de importe

Campos · MoneyField

Qué es y cuándo usarlo

Entrada de dinero que entiende cómo se escribe en cada idioma: coma decimal en español, punto en inglés, separador de miles y el símbolo de la moneda si alguien lo pega. Lo que sale por onChange es un número, nunca un texto.

Cuándo usarlo

Un precio, una cuota, el importe de una factura: cualquier cantidad de dinero que alguien teclea.
currency decide los decimales y el símbolo (EUR por defecto; el yen no lleva decimales).
min, max y allowsNegative marcan el error al salir del campo, con palabras.

Cuándo no

Mostrar un importe: Amount.
Una cantidad que no es dinero (unidades, kilos): NumberField.

Teclado: el de un campo de texto, con el teclado numérico en el móvil (inputmode="decimal"). Mientras se escribe no se recoloca nada: ni el cursor ni un separador a mitad de una cifra. Al salir se escribe con su formato (1.234,56 €) y al entrar vuelve a la forma editable (1234,56).

Accesibilidad: es un TextField, con su etiqueta, su ayuda y su error enlazados. El error salta al salir, no en cada tecla.

Aspecto fino: sin variables propias: son las del campo, --amset-field-*, con las cifras en ancho fijo.

Cómo se ve

Precio de venta

Tipo de IVA

Base 129,90 € + IVA 27,28 € = 157,18 €.

<MoneyField label="Precio de venta" value={precio} onChange={setPrecio} max={5000} />
<VatRateSelect value={iva} onChange={setIva} />

Props

Se importa con import { MoneyField } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Obligatoria: un campo sin etiqueta visible no entra en la libreria.
`allowsNegative`	`boolean`	Con `false` no acepta negativos. Por defecto, `false`.
`back`	`ReactNode`	Contenido detras del texto: una unidad ("€"), un boton de copiar.
`className`	`string`	—
`currency`	`string`	La moneda: `EUR` por defecto. Decide los decimales y el simbolo.
`disabled`	`boolean`	—
`error`	`string`	Mensaje de error. Al pasarlo, el campo queda marcado como invalido.
`front`	`ReactNode`	Contenido delante del texto: un icono, un prefijo ("+34").
`hiddenLabel`	`boolean`	La etiqueta solo para el lector de pantalla. Para cuando el campo va dentro de algo que ya se explica solo (el buscador de un grupo de filtros), nunca para ahorrar espacio.
`hint`	`string`	Texto de ayuda permanente bajo el campo. No sustituye a la etiqueta.
`initialValue`	`number \| null`	El importe al empezar, sin controlarlo desde fuera.
`inputRef`	`Ref<HTMLInputElement>`	El `<input>` de verdad, para enfocarlo, seleccionar su texto o medirlo desde fuera. Va aparte del `ref` porque el componente pinta una caja con etiqueta, ayuda y error, y quien pide un ref casi siempre quiere el control.
`invalid`	`boolean`	—
`max`	`number`	Lo maximo que se acepta.
`min`	`number`	Lo minimo que se acepta. Por debajo, el campo marca el error al salir.
`onChange`	`(value: number \| null) => void`	Entrega el numero (`1234.56`) o `null` si el campo esta vacio o no se entiende.
`onChangeEvent`	`(event: ChangeEvent<HTMLInputElement>) => void`	Como `onChange`, pero con el evento nativo del `<input>`: `e.target.value`, `e.currentTarget`... Existe para migrar un front que ya escribe sus manejadores con el evento (AMS-735). Si solo quieres el texto, `onChange` lo entrega ya.
`placeholder`	`string`	—
`readOnly`	`boolean`	—
`required`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	—
`validationBehavior`	`"aria" \| "native"`	`aria` (por defecto) anuncia el estado sin que el navegador interrumpa el envio con su globo; `native` añade ademas su validacion.
`value`	`number \| null`	El importe, controlado desde fuera. `null` es el campo vacio.
`variant`	`FieldVariant`	—

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: