Select

インポート

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
  SelectLabel,
  SelectSeparator,
} from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
  SelectLabel,
  SelectSeparator,
} from '@caroainc/ui-components/select'

Composition

Select
├─ SelectTrigger
│  └─ SelectValue?
└─ SelectContent
   ├─ SelectGroup?
   │  ├─ SelectLabel?
   │  └─ SelectItem+
   ├─ SelectItem*
   └─ SelectSeparator*

選択UIにはSelectTrigger、SelectContent、1件以上のSelectItemが必要で、Value、Group、Label、Separatorは任意です。SelectItemをTrigger側へ置かず、グループ化する場合はLabelとItemを同じSelectGroup内に置いてください。

CommandComboboxとの使い分け

場面	使うもの
選択肢が少ない・固定（ステータス、ロール等）	`Select`
選択肢が多い・検索が必要（メンバー、プロジェクト等）	`CommandCombobox`

基本的な使い方

<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="フルーツを選択" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">りんご</SelectItem>
    <SelectItem value="banana">バナナ</SelectItem>
    <SelectItem value="orange">オレンジ</SelectItem>
  </SelectContent>
</Select>

グループ・ラベル・セパレーター

選択肢が多い場合は SelectGroup + SelectLabel でカテゴリ分けし、SelectSeparator で区切ります。

<Select>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="担当者を選択" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>デザイナー</SelectLabel>
      <SelectItem value="tanaka">田中太郎</SelectItem>
      <SelectItem value="suzuki">鈴木花子</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>エンジニア</SelectLabel>
      <SelectItem value="sato">佐藤一郎</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

エラー状態

SelectTriggerにaria-invalidを渡すと赤枠のborder/ringが自動適用されます。

<SelectTrigger aria-invalid={!!errorMessage}>
  <SelectValue placeholder="フルーツを選択" />
</SelectTrigger>

無効状態

<Select disabled>
  <SelectTrigger>
    <SelectValue placeholder="選択不可" />
  </SelectTrigger>
  ...
</Select>

Props

Select

Prop	Type	Default	Description
`value`	`string`	`-`	選択値（制御コンポーネント）
`defaultValue`	`string`	`-`	初期選択値
`onValueChange`	`(value: string) => void`	`-`	選択変更時のコールバック
`disabled`	`boolean`	`false`	無効状態

SelectTrigger

Prop	Type	Default	Description
`aria-invalid`	`boolean`	`-`	エラー状態（trueで赤枠のborder/ringが自動適用される。ネイティブ属性）
`className`	`string`	`-`	追加のCSSクラス

SelectItem

Prop	Type	Default	Description
`value*`	`string`	`-`	選択肢の値
`disabled`	`boolean`	`false`	選択肢を無効化

Select

On this page