コンポーネント
Select
ボタンをクリックすると開き、選択肢の一覧から選べるリストを表示します。
使い方
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@murasakijs/ui";<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select a fruit" />
</SelectTrigger>
<SelectContent>
<SelectItem value="apple">Apple</SelectItem>
</SelectContent>
</Select>API リファレンス
サブコンポーネント
| コンポーネント | 説明 |
|---|---|
Select | ルートプリミティブ。value・defaultValue・onValueChange・disabled・name・required を受け取ります。 |
SelectGroup | 関連する SelectItem をグループ化します。 |
SelectValue | 選択中の値、未選択時は placeholder を表示します。 |
SelectTrigger | ポップアップを開くボタンです。 |
SelectContent | ポップアップ本体。position（"item-aligned" | "popper"、デフォルト "popper"）を受け取ります。 |
SelectLabel | SelectContent/SelectGroup 内の非インタラクティブなラベルです。 |
SelectItem | 選択可能なオプション。value（必須）と disabled を受け取ります。 |
SelectSeparator | 項目やグループ間の視覚的な区切り線です。 |
SelectScrollUpButton / SelectScrollDownButton | SelectContent 内に自動でレンダリングされるスクロール用ボタンです。 |
選択状態、先頭文字検索、キーボード操作、オーバーレイ配置は React Aria Components が提供します。