Select

The single-choice select. Note that onValueChange can hand you null.

Pick one option from a list. When there are many options and you want search, use SearchableSelect; for a handful shown side by side, SegmentedControl.

export const client = "only";

import { useState } from "react";
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectGroup,
  SelectLabel,
  SelectItem,
  SelectSeparator,
} from "@squadbase/vantage/ui";

const regions = {
  hokkaido: "北海道",
  kanto: "関東",
  kansai: "関西",
  kyushu: "九州",
};

export default function Example() {
  const [region, setRegion] = useState("kanto");
  return (
    <Select
      items={regions}
      value={region}
      onValueChange={(value) => value !== null && setRegion(value)}
    >
      <SelectTrigger className="w-56">
        <SelectValue placeholder="地域を選ぶ" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>東日本</SelectLabel>
          <SelectItem value="hokkaido">北海道</SelectItem>
          <SelectItem value="kanto">関東</SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>西日本</SelectLabel>
          <SelectItem value="kansai">関西</SelectItem>
          <SelectItem value="kyushu">九州</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectGroup,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
} from "@squadbase/vantage/ui";

Parts

Part	Role
`Select`	The state: `value` / `defaultValue` / `onValueChange` / `items`
`SelectTrigger`	The closed state. `size`: `default` \| `sm`
`SelectValue`	What’s selected; `placeholder` covers “nothing yet”
`SelectContent`	The open list
`SelectGroup` + `SelectLabel`	A group with a heading
`SelectItem`	One option; `value` is required

Base UI’s SelectValue renders the raw selected value — it never looks inside SelectItem. With value="kanto" the trigger would read kanto.

Vantage’s Select absorbs that quirk: it walks its children, collects each SelectItem’s value → label pair and hands them to Base UI as items, so the code below puts “Kanto” in the trigger. It’s the same treatment SegmentedControl gives ToggleGroup’s array API.

<Select value={region} onValueChange={…}>
  <SelectTrigger><SelectValue placeholder="Pick a region" /></SelectTrigger>
  <SelectContent>
    <SelectItem value="kanto">Kanto</SelectItem>
  </SelectContent>
</Select>;

Only SelectItems written in place are picked up (a map over them counts). When the options come back from a separate component, pass items yourself — an explicit items always wins.

const regions = { hokkaido: "Hokkaido", kanto: "Kanto", kansai: "Kansai" };

<Select items={regions} value={region} onValueChange={…}>

SelectContent opens over the trigger with the selected item aligned to it. For a plain dropdown below the trigger, pass alignItemWithTrigger={false}.