Vehicle plate inputkr
Korean vehicle plate number field that cleans input, validates with the plate parser and hints at the current and old formats.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/vehicle-plate-inputDefault
vehicle-plate-input-demo.tsx
"use client";
import * as React from "react";import type { PlateKr } from "@plott/webkit-format/kr";import { VehiclePlateInput } from "@/components/ui/vehicle-plate-input";
export default function VehiclePlateInputDemo() { const [plate, setPlate] = React.useState<PlateKr | null>(null); return ( <div className="flex w-72 flex-col gap-2"> <VehiclePlateInput name="plate" onValueChange={(_, parsed) => setPlate(parsed)} /> <p className="text-sm text-muted-foreground">Kind: {plate ? `${plate.kind} / ${plate.vehicleType}` : "unknown"}</p> </div> );}