"use client"

import * as React from "react"

import { Button } from "@/registry/ui/button/button"
import {
  Field,
  FieldControl,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/registry/ui/field/field"
import { Form } from "@/registry/ui/form/form"
import { Input } from "@/registry/ui/input/input"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/registry/ui/select/select"
import { setToasterPosition, toast } from "@/registry/ui/toast/toast"

const bands = [
  { label: "VHF · 145.800 MHz", value: "vhf" },
  { label: "UHF · 435.100 MHz", value: "uhf" },
  { label: "L-band · 1.296 GHz", value: "l-band" },
]

/** Callsigns already on the grid — the "server" rejects them. */
const TAKEN = ["KX-7", "KX-9", "VD-2"]

export default function FormBasic() {
  const [errors, setErrors] = React.useState<Record<string, string>>({})
  const [registered, setRegistered] = React.useState<string | null>(null)

  return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      <Form
        errors={errors}
        onFormSubmit={(values) => {
          const callsign = String(values.callsign ?? "").toUpperCase()
          if (TAKEN.includes(callsign)) {
            setRegistered(null)
            setErrors({
              callsign: `${callsign} is already on the grid. Pick another.`,
            })
            setToasterPosition("bottom-right")
            toast.destructive({
              title: "Couldn’t register",
              description: `${callsign} is already on the grid.`,
            })
            return
          }
          setErrors({})
          setRegistered(callsign)
          setToasterPosition("bottom-right")
          toast.success({
            title: "Relay registered",
            description: `${callsign} is live on the mesh.`,
          })
        }}
      >
        <Field name="callsign">
          <FieldLabel>Callsign</FieldLabel>
          <FieldControl required placeholder="KX-7" render={<Input />} />
          <FieldDescription>Try KX-7 to see a server error.</FieldDescription>
          <FieldError />
        </Field>

        <Field name="band">
          <FieldLabel nativeLabel={false} render={<div />}>
            Band
          </FieldLabel>
          <Select defaultValue="vhf" items={bands}>
            <SelectTrigger>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {bands.map((band) => (
                <SelectItem key={band.value} value={band.value}>
                  {band.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </Field>

        <Button type="submit">Register relay</Button>
      </Form>

      {registered ? (
        <p role="status" className="text-sm text-muted-foreground">
          <span className="font-mono font-medium text-foreground">
            {registered}
          </span>{" "}
          registered. Welcome to the grid.
        </p>
      ) : null}
    </div>
  )
}
Draw

Examples
