セレクトSelectBeta
ボタンで開く選択肢のリストを表示します。
プレビュー
状態とバリエーション
ラベル付き
フォーム内ではラベルと補足文を合わせて配置します。
グループ化
候補が多い時は optgroup で分類します。
無効化
選べない理由はツールチップと補足文で伝えます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | string | - | 外部から制御する選択値です。 |
| defaultValue | string | - | 初期選択値です。 |
| onChange | React.ChangeEventHandler<HTMLSelectElement> | - | 選択値が変わった時に呼ばれます。 |
| disabled | boolean | false | 選択できない状態にします。理由はツールチップで補足します。 |
| className | string | - | Select はデフォルトで親幅いっぱいに広がります。幅は FormGroup や外側の max-w-* で制約します。 |
使い方
import * as React from "react";
import { FormControl, FormGroup, FormLabel, Select } from "@gunjo/ui";
export function OfficePicker() {
const [office, setOffice] = React.useState("tokyo");
return (
<FormGroup className="w-full max-w-sm">
<FormLabel htmlFor="office">拠点</FormLabel>
<FormControl>
<Select
id="office"
value={office}
onChange={(event) => setOffice(event.target.value)}
>
<option value="tokyo">東京</option>
<option value="osaka">大阪</option>
<option value="fukuoka">福岡</option>
</Select>
</FormControl>
</FormGroup>
);
}設計の判断
- 素の
selectのまま出す。資料は「選択肢が4以下なら Radio、5から15なら Select、15を超えるなら Combobox」を挙げています。GUNJO の Select はその真ん中だけを引き受け、ブラウザのselectをそのまま使います。開いた一覧は OS のものになるので、スマホでは端末の選択画面が出ます。検索や複数選択が要る画面は、この部品ではなく Combobox の仕事です。 - ラベルを部品の中に入れた。資料は「ラベルは必ず枠外に常時表示する」を挙げています。
labelを渡すとhtmlForで結んだ文字が上に出て、descriptionを渡すと下に補足が出てaria-describedbyで結ばれます。どちらも渡さなければ包む箱ごと作らないので、表のセルのような狭い場所にもそのまま置けます。 - 矢印は飾りとして重ねてある。
appearance-noneで OS の矢印を消し、pointer-events-noneを付けた山形のアイコンを右に重ねています。クリックはすべて下のselectに届くので、アイコンの上を押しても開きます。誤りを示す赤い枠も、専用のクラスではなくaria-invalidの属性で切り替わります。
使用コンポーネント
関連コンポーネント
いつ・なぜ使うか（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。