＊このドキュメントは編集中です

概要

セレクトボックスは、複数の選択肢から一つを選ぶための入力要素です。 ドロップダウンリストとも呼ばれ、限られたスペースで多くの選択肢を提示できる利点があります。

セレクトボックスは主に以下のような場面に適しています。

• 選択肢が多く、一度に表示するとスペースを取りすぎる場合
• 選択肢が明確に定義されており、ユーザーが自由入力する必要がない場合
• 選択肢を提示しつつデフォルト値を強調したい場合

セレクトボックスを使用する際は、デフォルト値の設定に注意してください。 ユーザーが意図せず誤った選択をしてしまうことを防ぐため、適切なデフォルト値を設定するか、 「選択してください」などの指示テキストを初期表示することが推奨されます。

また、選択肢が少ない場合（2〜5個程度）は、ラジオボタンの使用も検討してください。 ラジオボタンであれば、すべての選択肢を一度に確認できるため、ユーザーの認知負荷を減らすことができます。

Dictionary

Element

AContainer

セレクトボックスのかたちをつくる要素です。この要素の大きさが、セレクトボックスをタップ/クリックできる範囲です。

BInput text

セレクトボックスで選べる選択肢のうちのひとつをテキストで表示します。選択していない、または空の選択肢（HTMLのvalue属性が空のoption要素）を選択している場合は、表示しません。

CTrailing icon

セレクトボックスの機能を伝えるためのアイコンです。下向きの三角形の形をしていて、アイコンの形は変えられません。

Appearance

Selectの見た目を指定できます。

	Modifier class
Outlined*	.-appearance-outlined
Filled	.-appearance-filled

Color

Semantic Colorを指定して配色できます。

	Modifier class	Pepper flavor
Neutral*	.-color-neutral	Pepper Gray
Negative	.-color-negative	Pepper Red

Size

どのくらいの大きさで表示するか指定できます。

	Modifier class
S	.-size-s
M*	.-size-m
L	.-size-l

Width

親要素の幅に対してどのくらいの幅で表示するか指定できます。

	Modifier class
Auto*	.-width-auto
Full	.-width-full
Half	.-width-half
Third	.-width-third

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;