Todos los componentes (204)

Matrícula

Campos · LicensePlateField

Qué es y cuándo usarlo

La matrícula de un vehículo español: la de ahora (1234 BCD: cuatro cifras y tres consonantes, sin vocales, Ñ ni Q), la provincial de antes del 2000 (M-1234-AB, con las letras de una provincia que existe) y la de ciclomotor (C 1234 BCD).

Cuándo usarlo

Talleres, seguros, parkings, flotas: cualquier formulario que pida una matrícula.
Se escribe en mayúsculas, sale por onChange limpia (1234BCD) y al salir del campo se escribe con su formato.
La ayuda dice de qué tipo de matrícula se trata, con palabras.

Cuándo no

Matrículas de otro país: TextField.
Un bastidor (VIN): TextField.

Teclado: el de un campo de texto. No se admiten más de ocho caracteres.

Accesibilidad: es un TextField, con su etiqueta, su ayuda y su error enlazados. El error salta al salir del campo.

Aspecto fino: sin variables propias: son las del campo, --amset-field-*.

Cómo se ve

Matrícula del vehículo

Matrícula actual

Se guarda 1234BCD.

Prueba con 1234AEI y sal del campo: las vocales no existen en una matrícula y el campo lo avisa.

<LicensePlateField label="Matrícula del vehículo" value={matricula} onChange={setMatricula} />

Props

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

Prop	Tipo	Para qué sirve
`back`	`ReactNode`	Contenido detras del texto: una unidad ("€"), un boton de copiar.
`className`	`string`	—
`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`	`string`	—
`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`	—
`label`	`string`	—
`onChange`	`(value: string) => void`	Lo que sale va limpio: sin espacios ni guiones y en mayusculas.
`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`	`string`	La matricula sin espacios ni guiones y en mayusculas (`1234BCD`). Controlado desde fuera.
`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: