"use client"

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/registry/ui/select/select"

export default function SelectGroups() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <label htmlFor="relay-station" className="text-sm font-medium">
        Relay station
      </label>
      <Select defaultValue={null}>
        <SelectTrigger id="relay-station">
          <SelectValue placeholder="Assign a relay" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Northern grid</SelectLabel>
            <SelectItem value="KX-7">KX-7 — Svalbard</SelectItem>
            <SelectItem value="KX-9">KX-9 — Reykjavik</SelectItem>
          </SelectGroup>
          <SelectGroup>
            <SelectLabel>Equatorial grid</SelectLabel>
            <SelectItem value="VD-2">VD-2 — Quito</SelectItem>
            <SelectItem value="VD-5">VD-5 — Nairobi</SelectItem>
            <SelectItem value="VD-8" disabled>
              VD-8 — Singapore (offline)
            </SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  )
}
Draw

Examples
