Select
セレクトボックスは、複数の選択肢から一つを選ぶための入力要素です。ドロップダウンリストとも呼ばれ、限られたスペースで多くの選択肢を提示できる利点があります。
1. 概要 (Overview)
説明
Select はフォーム入力におけるプリミティブな項目選択のために用いる、単数選択のコンポーネントです。サブ階層を持つナビゲーションメニューのようなリッチな機能は持ちません。
HTML 標準の <select> 要素の multiple 属性による複数選択は、ブラウザ間の差が大きく操作が暗黙的なため Inhouse では扱わず、複数選択には Checkbox を並べる、または Interactive List の利用を検討します。
Select を使用する際は、デフォルト値の設定に注意してください。ユーザーが意図せず誤った選択をしてしまうことを防ぐため、適切なデフォルト値を設定するか、「選択してください」などの指示テキストを初期表示することが推奨されます。
リンク
2. 構成要素 (Anatomy)
AContainer
セレクトボックスのかたちをつくる要素です。この要素の大きさが、セレクトボックスをタップ/クリックできる範囲です。
必須/任意: 必須
BInput text
セレクトボックスで選べる選択肢のうちのひとつをテキストで表示します。選択していない、または空の選択肢（HTMLのvalue属性が空のoption要素）を選択している場合は、表示しません。
必須/任意: 任意（未選択時は表示されない）
CTrailing icon
セレクトボックスの機能を伝えるためのアイコンです。下向きの三角形の形をしていて、アイコンの形は変えられません。
必須/任意: 必須（形状は変更不可）
3. 使い分け (Usage)
いつ使うか
- 選択肢が多く、Radio などで一覧表示するとスペースを取りすぎる場合に、選択肢リストを格納して表示面積を抑える用途で使います。
- 選択肢が明確に定義されており、ユーザーが自由入力する必要がない場面で使います。
- 選択肢を提示しつつデフォルト値を強調したい場面で使います。
いつ使わないか
- 選択肢の数が4個程度までの場合は、Radio の利用を検討します。すべての選択肢を一度に確認でき、選択時の操作回数も減らせます。
- 複数選択をさせたい場合は、Checkbox を並べて使います。HTML 標準の
<select>要素にはmultiple属性で複数選択する機能もありますが、ブラウザ間の差が大きく操作が暗黙的なため、Inhouse では Select を単数選択に絞っています。 - 選択肢が極端に多く一覧として扱いきれない場合は、Select 単体では完結させず、インクリメンタルサーチなど別のフィルタリング手段との併用を検討します。
類似コンポーネントとの違い
- Radio: 選択肢が少ない場合は、すべての選択肢を一度に確認できるため、ユーザーの認知負荷を減らすことができます。
- Checkbox: 複数選択や ON/OFF の切り替えには Checkbox を使います。
選択肢の並び順
option の並び順は、操作頻度ではなく予測可能性を優先します。たとえば日本の都道府県の選択肢は、出現頻度ではなく地理的に規則的な順序（北から南など）で並べます。これにより、ユーザーは規則性を手がかりに目的の選択肢の位置を予測しやすくなります。
未選択状態について
HTML の <select> 要素には未選択状態を表す option が標準では存在しませんが、Inhouse では未選択状態を表す選択肢を用意することを許容します。
例として、value が空（かつ disabled）でラベルが「未選択」のような option を用意します。Radio と異なり、Select では選択された option 以外の選択肢が常時見えないため、ユーザーの意図的な選択が必須な場面でも Select の存在自体が見落とされる場合があるためです。
未選択状態を設定すべき場合
- 意図しない値が選択された状態でユーザーが Select の存在に気付かず submit すると、問題が発生する場合。
未選択状態が不要な場合
- ほとんどのユーザーが選択するような優先度の高い選択肢がある場合。
- 後から変更可能で、かつ初期値のまま submit されても問題を引き起こさない選択肢を初期値に設定できる場合。
4. バリエーション (Variants)
Appearance
Selectの見た目を指定できます。
| Modifier class | ||
|---|---|---|
| Outlined* | .-appearance-outlined | |
| Filled | .-appearance-filled |
推奨される選び方の判断基準:
- どちらの Appearance も同じ機能を提供します。サービスのスタイルに最適なものを選択してください。
- 同一の画面内で使用する場合は、同じセクション内で異なる Appearance を混在させず、セクション内では一貫した Appearance を使います。
- スタイルの指針は Textfield と共通です。
Color
Semantic Colorを指定して配色できます。
| Modifier class | Pepper flavor | |
|---|---|---|
| Neutral* | .-color-neutral | Pepper Gray |
| Negative | .-color-negative | Pepper Red |
推奨される選び方の判断基準:
- Neutral: 通常の状態。
- Negative: 入力が必須にもかかわらず選択が行われていない、または選択された値が無効な状態を表します。
Size
どのくらいの大きさで表示するか指定できます。
| Modifier class | ||
|---|---|---|
| S | .-size-s | |
| M* | .-size-m | |
| L | .-size-l |
推奨される選び方の判断基準:
- 基本のサイズは M。
Width
親要素の幅に対してどのくらいの幅で表示するか指定できます。
| Modifier class | ||
|---|---|---|
| Auto* | .-width-auto | |
| Full | .-width-full | |
| Half | .-width-half | |
| Third | .-width-third |
推奨される選び方の判断基準:
- ラベルの文字量や配置領域に応じて選びます。
- Auto: 内容に応じた幅で表示する。
- Full: 親要素の幅いっぱいに広げる。
- Half / Third: 親要素に対して 1/2、1/3 の幅で表示する。
実装
Mixin-based
HTML
<span class="select-component">
<select class="_select">
<option class="_option">Option A</option>
<option class="_option">Option B</option>
<option class="_option">Option C</option>
</select>
<span class="_icon"></span>
</span>
SCSS
@use '@pepabo-inhouse/components-web' as inhouse;
.select-component {
@include inhouse.select-style(
$options: (
appearance: outlined,
color: neutral,
size: m,
width: auto,
)
);
}
Class-based
HTML
<span class="in-select -appearance-outlined -color-neutral -size-m -width-auto">
<select class="_select">
<option class="_option">Option A</option>
<option class="_option">Option B</option>
<option class="_option">Option C</option>
</select>
<span class="_icon"></span>
</span>
SCSS
@use '@pepabo-inhouse/components-web' as inhouse;
@include inhouse.select-export;
5. ステート (States)
Default
特に何もアクションしていないデフォルトの状態です。
Hover
線に Hover の Overlay Color を重ねて、選択しようとしていることを示します。
Focus
線に Focus の Overlay Color を重ねてフォーカスされていることを示し、Focus Ring をつけてフォーカスされていることを強調します。
Disabled
透明度を上げて、インタラクションが不可能であることを示します。
Error
.-color-negative モディファイアを適用し、入力が必須にもかかわらず選択が行われていない、または選択された値が無効な状態を表します。
6. アクセシビリティ (Accessibility)
このコンポーネント固有のチェック項目です。コントラスト・フォーカス可視化など全コンポーネント共通の原則はアクセシビリティガイドラインを参照してください。
- HTML 標準の
<select>要素でマークアップする（独自実装でドロップダウンを再現しない） <label>要素で Label をマークアップし、<select>と関連付ける- ユーザーの意図的な選択が必須な場面では、
valueが空（かつdisabled）の「未選択」option を用意し、誤って初期値のまま submit されないようにする