セレクトボックス

セレクトボックス（ドロップダウン選択肢）

セレクトボックス（ドロップダウン選択肢）のコンポーネントにはsu-form-selectboxのクラス名を付与します。

span要素などを用いてマークアップし、その子要素にselect要素を含めるようにします。上記クラス名を付与することでスタイルが適用されます。セレクトボックスの入力項目として境界線や内余白などが適切に調整されます。

選択肢リストから、単一あるいは複数の選択肢に使用するインプット要素です。入力できることがわかりやすく伝わるようにスタイリングされます。

<!-- 単一選択のセレクトボックス -->
<span class="su-form-selectbox">
  <select aria-label="〇〇の選択入力">
    <option value="">選択してください</option>
    <option value="選択肢1">選択肢1</option>
    <option value="選択肢2">選択肢2</option>
    <option value="選択肢3">選択肢3</option>
  </select>
</span>

<!-- 複数選択のセレクトボックス -->
<span class="su-form-selectbox">
  <select multiple aria-label="〇〇の選択入力">
    <option value="">選択してください</option>
    <optgroup label="選択肢1">
      <option value="選択肢1-1">選択肢1-1</option>
      <option value="選択肢1-2">選択肢1-2</option>
      <option value="選択肢1-3">選択肢1-3</option>
    </optgroup>
    <optgroup label="選択肢2">
      <option value="選択肢2-1">選択肢2-1</option>
      <option value="選択肢2-2">選択肢2-2</option>
      <option value="選択肢2-3">選択肢2-3</option>
    </optgroup>
  </select>
</span>

セレクトボックスのボーダーやアイコン、入力値文字の色、角丸サイズはCSS変数を使って変更することが可能です。

.su-form-selectbox {
  --su-color-border-selectbox: red;
  --su-color-text-selectbox: lime;
  --su-color-icon-selectbox: yellow;
  --su-size-radius-selectbox: 10px;
}

アクセシビリティの支援

セレクトボックスのコンポーネントはアクセシビリティの対応として、select要素に対してaria-label属性を使うことで、より詳しく入力フィールドの目的を案内することができます。

<!-- セレクトボックスに対して、特定の選択入力であることを伝える -->
<span class="su-form-selectbox">
  <select aria-label="〇〇の選択入力">
    <option value="">選択してください</option>
    <option value="選択肢1">選択肢1</option>
    ...
  </select>
</span>

また、label要素を用意し、select要素と紐付けることで、スクリーンリーダー使用時に、より入力の目的が明確になります。

<!-- ラベル要素とセレクトボックス要素を紐づける -->
<label id="select-description">〇〇の設問について回答してください</label>
<span class="su-form-selectbox">
  <select 
    aria-label="〇〇の選択入力"
    aria-describedby="select-description"
  >
    <option value="">選択してください</option>
    <option value="選択肢1">選択肢1</option>
    ...
  </select>
</span>

必須フィールドの明示

必須の入力フィールドに対しては、select要素に対してaria-required="true"の属性値を指定し、ラベル側でも必須であることが伝わるようにすることが効果的です。

<!-- 必須入力のフィールド -->
<label id="select-description">
  <span>〇〇の設問について回答してください</span>
  <span class="su-text-2s su-text-bold su-text-error">【必須】</span>
</label>
<span class="su-form-selectbox">
  <select 
    aria-label="〇〇の選択入力" 
    aria-describedby="select-description" 
    aria-required="true"
  >
    <option value="">選択してください</option>
    <option value="選択肢1">選択肢1</option>
    <option value="選択肢2">選択肢2</option>
    <option value="選択肢3">選択肢3</option>
  </select>
</span>