Plate Input
A segmented Iranian vehicle license plate (پلاک ماشین) input: the flag/IR/IRAN country band, two digits, a letter picker, three digits, and the ایران serial segment — built on Input Group and Select. Plates have no RTL rendering, so the component is forced LTR regardless of the surrounding direction, and typed Persian digits are normalized to Latin.
Last updated October 20, 2018
Copied from AZKI's car-plate widget.
- Rebuilt as an original component on this repo's InputGroup and Select primitives instead of a background-image plate and MUI inputs
- Uses logical CSS and this repo's theme tokens rather than hardcoded azki.com styles
- Adds keyboard flow between segments (auto-advance on fill, Backspace retreats), multi-format full-plate paste parsing, and Persian digit normalization
Overview
Installation
$ npx shadcn@latest add @persianlabsui/plate-inputUsage
import { PlateInput } from "@/components/ui/plate-input"<PlateInput />The value is an object — { twoDigit, letter, threeDigit, serial } — reported through onValueChange on every change. The component is complete when all four segments are filled; wire invalid yourself for submit-time validation.
Examples
Wheelchair Plate
Pick معلولان from the letter picker for accessibility plates — it renders as an info-colored icon instead of text.
Paste
Copy any sample below and paste it into any segment — the full plate distributes across all four parts, in every common shape.
Controlled
Read the full value externally, e.g. to serialize or validate it.
Inside a Form
The plate is forced LTR regardless of the surrounding interface direction — labels and descriptions follow your document while the plate keeps its real-world layout. Submitting an incomplete plate marks every empty segment red with an inline error; completing the plate clears it.