セレクトSelectBeta
ボタンで開く選択肢のリストを表示します。
プレビュー
状態とバリエーション
ラベル付き
フォーム内ではラベルと補足文を合わせて配置します。
グループ化
候補が多い時は optgroup で分類します。
無効化
選べない理由はツールチップと補足文で伝えます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | string | - | 外部から制御する選択値です。 |
| defaultValue | string | - | 初期選択値です。 |
| onChange | React.ChangeEventHandler<HTMLSelectElement> | - | 選択値が変わった時に呼ばれます。 |
| disabled | boolean | false | 選択できない状態にします。理由はツールチップで補足します。 |
| className | string | - | Select はデフォルトで親幅いっぱいに広がります。幅は FormGroup や外側の max-w-* で制約します。 |
使い方
import { FormControl, FormGroup, FormLabel, Select } from "@gunjo/ui";
<FormGroup className="w-full max-w-sm">
<FormLabel htmlFor="office">拠点</FormLabel>
<FormControl>
<Select id="office" defaultValue="tokyo">
<option value="tokyo">東京</option>
<option value="osaka">大阪</option>
<option value="fukuoka">福岡</option>
</Select>
</FormControl>
</FormGroup>使用コンポーネント
関連コンポーネント
設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。