オプションボタン

オプションボタン（単一・複数選択肢）

オプションボタン（単一・複数選択肢）のコンポーネントにはsu-form-option-buttonsのクラス名を付与します。

fieldset要素を用いて下記のようにマークアップし、ボタン型のUIの選択肢を作成します。この要素の子要素にlabel要素でラッピングし、input要素を含めるようにします。

内包するインプット要素は、単一選択の場合ではinput[type="radio"]を、複数選択の場合ではinput[type="checkbox"]と、適宜要件に合わせてマークアップします。

複数の選択肢から、単一もしくは複数の選択ができるボタン型のUIを持つインプット要素です。入力できることがわかりやすく伝わるようにスタイリングされます。

<!-- 単一選択肢 -->
<fieldset class="su-form-option-buttons">
  <legend>オプションを選択してください</legend>
  <label>
    <input type="radio" name="option_button" value="選択肢1" checked>選択肢1
  </label>
  <label>
    <input type="radio" name="option_button" value="選択肢2">選択肢2
  </label>
  ...
</fieldset>

<!-- 複数選択肢 -->
<fieldset class="su-form-option-buttons">
  <legend>オプションを選択してください</legend>
  <label>
    <input type="checkbox" name="option_button" value="選択肢1" checked>選択肢1
  </label>
  <label>
    <input type="checkbox" name="option_button" value="選択肢2">選択肢2
  </label>
  ...
</fieldset>

ラジオボタンのボーダー、マーカー色や角丸サイズ、またホバーやフォーカス時のアウトラインの色はCSS変数を使って変更することが可能です。

.su-form-option-buttons {
  --su-color-border-option-buttons: black;
  --su-color-border-option-buttons-checked: pink;
  --su-color-border-option-buttons-hover: red;
  --su-color-border-option-buttons-focus: white;
  --su-color-text-option-buttons: lime;
  --su-color-fill-option-buttons: blue;
  --su-color-text-option-buttons-checked: orange;
  --su-size-radius-option-buttons: 20px;
}

アクセシビリティの支援

オプションボタンのコンポーネントはアクセシビリティの対応として、fieldset要素で複数のインプット要素をグルーピングし、legend要素で説明を加えることで、スクリーンリーダーに対して目的をより明確に伝えられます。

<fieldset class="su-form-option-buttons">
  <!-- 選択肢の説明や操作を案内するテキストを追加 -->
  <legend>次のオプションからを1つ選択してください</legend>
  <label>
    <input type="radio" name="option_button" value="選択肢1" checked>選択肢1
  </label>
  <label>
    <input type="radio" name="option_button" value="選択肢2">選択肢2
  </label>
  ...
</fieldset>