Select

単一選択のセレクト。onValueChange は null を渡しうる。

候補から 1 つ選ぶ入力です。候補が多くて検索したい場合は SearchableSelect、少数を横並びで見せたい場合は 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";

パーツ

パーツ	役割
`Select`	状態。`value` / `defaultValue` / `onValueChange` / `items`
`SelectTrigger`	閉じているときの見た目。`size`: `default` \| `sm`
`SelectValue`	選択中の表示。`placeholder` は未選択時
`SelectContent`	開いたときのリスト
`SelectGroup` + `SelectLabel`	見出し付きのグループ
`SelectItem`	1 項目。`value` は必須

onValueChange は string | null を渡します（Base UI では選択解除がありうるため）。 null を握りつぶすガードを必ず書いてください。

<Select onValueChange={(value) => value !== null && setRegion(value)}>

Base UI の SelectValue は選択中の value をそのまま表示する部品で、SelectItem の中身は見ません。value="kanto" ならトリガーには kanto と出ます。

Vantage の Select はこの癖を吸収します — children を辿って SelectItem の value → ラベルの対応を組み、Base UI の items に渡すので、下の書き方でトリガーに「関東」と出ます。 SegmentedControl が ToggleGroup の配列 API を吸収しているのと同じ扱いです。

<Select value={region} onValueChange={…}>
  <SelectTrigger><SelectValue placeholder="地域を選ぶ" /></SelectTrigger>
  <SelectContent>
    <SelectItem value="kanto">関東</SelectItem>
  </SelectContent>
</Select>;

自動で拾えるのは、その場に書かれた SelectItem だけです(map で並べるのは拾えます)。項目を別のコンポーネントが返す形にしているときは items を明示してください。明示した items は常に優先されます。

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

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

SelectContent は既定で選択中の項目をトリガーに重ねて開きます。素直に下へ開かせたいときは alignItemWithTrigger={false} を渡します。