Select

ドロップダウンリストから項目を選択するためのコンポーネント。

Installation

npx shadcn@latest add https://kasumi-ui.vercel.app/r/select.json

Usage

import {
Select,
SelectTrigger,
SelectValue,
SelectContent,
SelectItem,
} from "@/components/ui/select";

<Select>
<SelectTrigger className="w-[240px]">
  <SelectValue placeholder="果物を選択" />
</SelectTrigger>
<SelectContent>
  <SelectItem value="apple">りんご</SelectItem>
  <SelectItem value="banana">バナナ</SelectItem>
  <SelectItem value="grape">ぶどう</SelectItem>
</SelectContent>
</Select>

Size

<Select>
<SelectTrigger size="sm">
  <SelectValue placeholder="Small" />
</SelectTrigger>
<SelectContent>
  <SelectItem value="a">選択肢 A</SelectItem>
  <SelectItem value="b">選択肢 B</SelectItem>
</SelectContent>
</Select>

<Select>
<SelectTrigger size="md">
  <SelectValue placeholder="Medium" />
</SelectTrigger>
<SelectContent>
  <SelectItem value="a">選択肢 A</SelectItem>
  <SelectItem value="b">選択肢 B</SelectItem>
</SelectContent>
</Select>

<Select>
<SelectTrigger size="lg">
  <SelectValue placeholder="Large" />
</SelectTrigger>
<SelectContent>
  <SelectItem value="a">選択肢 A</SelectItem>
  <SelectItem value="b">選択肢 B</SelectItem>
</SelectContent>
</Select>

Error

<Select>
<SelectTrigger error>
  <SelectValue placeholder="エラー状態" />
</SelectTrigger>
<SelectContent>
  <SelectItem value="a">選択肢 A</SelectItem>
  <SelectItem value="b">選択肢 B</SelectItem>
</SelectContent>
</Select>

Disabled

<Select disabled>
<SelectTrigger>
  <SelectValue placeholder="無効な選択" />
</SelectTrigger>
<SelectContent>
  <SelectItem value="a">選択肢 A</SelectItem>
</SelectContent>
</Select>

Props

Select

Prop	Type	Default	Description
value	string	-	選択中の値（制御コンポーネント用）
onValueChange	(value: string) => void	-	値が変更されたときのコールバック
disabled	boolean	false	無効状態にする

SelectTrigger

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	トリガーのサイズ
error	boolean	false	エラー状態を表示する

SelectItem

Prop	Type	Default	Description
value	string	-	選択肢の値（必須）
disabled	boolean	false	選択肢を無効にする