Tag input

"use client";

import { FormField, TagInput } from "@waveinno/ui";
import * as React from "react";

export default function TagDemo() {
  const [plates, setPlates] = React.useState(["DHA-GA 12-3456", "DHA-KHA 45-1020"]);
  return (
    <div className="grid gap-6 md:grid-cols-2">
      <FormField label="Plates on this pass" hint="Enter or comma adds one; paste a list to add many.">
        <TagInput value={plates} onValueChange={setPlates} max={5} transform={(t) => t.trim().toUpperCase()} validate={(t) => (/^[A-Z]+-[A-Z]+ \d{2}-\d{4}$/.test(t) ? null : "Plates look like DHA-GA 12-3456")} />
      </FormField>
      <FormField label="Notify" hint="Suggestions from your team.">
        <TagInput variant="outline" placeholder="Add a person…" suggestions={["Karim Ahmed", "Nusrat Jahan", "Rafiq Islam", "Farhana Akter", "Tanvir Hasan"]} defaultValue={["Karim Ahmed"]} />
      </FormField>
      <FormField label="Site labels">
        <TagInput variant="solid" defaultValue={["24 hours", "EV charging", "Covered"]} />
      </FormField>
    </div>
  );
}