セレクトボックス／Select

プルダウン形式の複数項目から、単一ないし複数の項目を選択できるコンポーネントです。

<div class="c-form__item">
  <label id="select-label" class="c-form__label" for="select-sample">
    <span class="c-form__labelText">ラベル</span>
    <span class="c-form__description">入力項目の説明文が入ります。</span>
  </label>
  <div class="c-selectGroup">
    <select
      id="select-sample"
      class="c-select"
      name="pets"
      aria-labelledby="select-label"
    >
      <option value="">選択してください</option>
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster">Hamster</option>
      <option value="parrot">Parrot</option>
      <option value="spider">Spider</option>
      <option value="goldfish">Goldfish</option>
    </select>
  </div>
</div>

原則

項目ラベル、入力必須項目、サポートテキストは入力を補助する要素がコンポーネントに予め用意されていますが、必要に応じて表示／非表示を切り替えて利用します。
利用不可（Disabled）の状態を表示させる際は、サポートテキストを利用してユーザーに利用することができない理由を知らせる必要があります。
ユーザーがクリックするまで、選択肢のすべてを認識できない場合があることへの考慮が必要です。また、クリック後に表示される選択肢は利用するブラウザに依存した表示がされます。