inputs
Select
Radix UI ベースのアクセシブルなドロップダウンセレクト。検索・グループ化・エラー状態に対応し、キーボード操作も可能。
インポート
import { Select, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator } from '@stella-ds/react'SelectSelectTriggerSelectContentSelectItemSelectGroupSelectLabelSelectSeparator
Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
| size (SelectTrigger) | 'sm' | 'md' | 'lg' | 'md' | Size preset |
| error (SelectTrigger) | boolean | string | false | Error state or message |
| placeholder (SelectTrigger) | string | undefined | Placeholder text |
Preview
使用例
Basic
<Select>
<SelectTrigger placeholder="Pick a fruit" />
<SelectContent>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="cherry">Cherry</SelectItem>
</SelectContent>
</Select>