Select

import { useState } from "react";
import { Label, Select } from "@gpuixui/primitives";

const regions = [
  {
    label: "Europe",
    options: [
      { value: "eu-west", label: "Europe — West (Ireland)" },
      { value: "eu-central", label: "Europe — Central (Frankfurt)" },
    ],
  },
  {
    label: "Americas",
    options: [
      { value: "us-east", label: "United States — East" },
      { value: "us-west", label: "United States — West" },
    ],
  },
];

export const DeployTarget = () => {
  const [region, setRegion] = useState("eu-west");

  return (
    <>
      <Label>Region</Label>
      <Select
        label="Region"
        onValueChange={setRegion}
        options={regions}
        value={region}
      />
    </>
  );
};

Select
├── trigger (built in)
├── content
│   └── item
└── group / label / separator