All components (204)

License plate

Fields · LicensePlateField

What it is and when to use it

The license plate of a Spanish vehicle: the current one (1234 BCD: four digits and three consonants, no vowels, Ñ or Q), the provincial one from before 2000 (M-1234-AB, with the letters of a province that exists) and the moped one (C 1234 BCD).

When to use it

Garages, insurers, car parks, fleets: any form that asks for a license plate.
It is typed in capitals, onChange delivers it clean (1234BCD) and on leaving the field it is written in its proper format.
The help text says in words which type of plate it is.

When not to

Plates from another country: TextField.
A chassis number (VIN): TextField.

Keyboard: that of a text field. No more than eight characters are accepted.

Accessibility: it is a TextField, with its label, help text and error linked. The error appears when leaving the field.

Fine styling: no variables of its own: it uses the field ones, --amset-field-*.

What it looks like

Vehicle license plate

Current format

Saved as 1234BCD.

Try 1234AEI and leave the field: vowels do not exist in a plate and the field says so.

<LicensePlateField label="Vehicle license plate" value={matricula} onChange={setMatricula} />

Props

Import it with import { LicensePlateField } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`back`	`ReactNode`	Content behind the text: a unit ("€"), a copy button.
`className`	`string`	—
`disabled`	`boolean`	—
`error`	`string`	Error message. When it is passed, the field is marked as invalid.
`front`	`ReactNode`	Content before the text: an icon, a prefix ("+34").
`hiddenLabel`	`boolean`	The label for the screen reader only. For when the field sits inside something that already explains itself (a table cell, a group of filters), never to save space.
`hint`	`string`	Permanent hint text below the field. It does not replace the label.
`initialValue`	`string`	—
`inputRef`	`Ref<HTMLInputElement>`	The real `<input>`, to focus it, select its text or measure it from outside. It is separate from `ref` because the component paints a box with label, hint and error, and whoever asks for a ref almost always wants the control.
`invalid`	`boolean`	—
`label`	`string`	—
`onChange`	`(value: string) => void`	The output is clean: no spaces or hyphens, and in uppercase.
`onChangeEvent`	`(event: ChangeEvent<HTMLInputElement>) => void`	Like `onChange`, but with the native event of the `<input>`: `e.target.value`, `e.currentTarget`... It exists to migrate a front end that already writes its handlers with the event (AMS-735). If you only want the text, `onChange` already gives it to you.
`placeholder`	`string`	—
`readOnly`	`boolean`	—
`required`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	—
`validationBehavior`	`"aria" \| "native"`	`aria` (the default) announces the state without the browser interrupting submission with its bubble; `native` also adds its own validation.
`value`	`string`	The license plate without spaces or hyphens and in capitals (`1234BCD`). Controlled from outside.
`variant`	`FieldVariant`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: