Select
複数の選択肢から1つを選ぶドロップダウン。都道府県・カテゴリ・言語設定など、5件以上の選択肢があるときに使う。
インストール
npx shoji add select
プレビュー
日本語の長い選択肢でも、44px の高さで読みやすく表示します。
Sizes
sm · 36px
md · 44px
lg · 56px
States
デフォルト
無効
エラー
住所種別を選択してください
使い方
こんなときに使う
- 選択肢が5件以上あり、RadioGroup では縦に長くなりすぎるとき
- 都道府県・国・言語など、標準的なリストから選択させるとき
- スペースが限られたフォームで選択肢をコンパクトに表示したいとき
使わないほうがいい場面
- 選択肢が2〜4件の場合（RadioGroup のほうが一覧性が高く選びやすい）
- 選択肢が1件しかない場合（そもそも選択UIは不要）
JP 最適化のポイント
- Trigger 高さを h-11（44px）に設定 — 日本語の長い選択肢テキストが切れずに表示されるよう余裕を持たせた
- SelectItem に leading-relaxed を適用 — 長い日本語選択肢が折り返しても読みやすい