ラジオボタン

ラジオボタン（単一選択肢）

ラジオボタン（単一選択肢）のコンポーネントにはsu-form-radioのクラス名を付与します。

input要素単体ではなく、操作性やアクセシビリティの観点からlabel要素でラッピングするようにマークアップします。

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

<label>
  <input class="su-form-radio" type="radio" role="radio" />ラジオボタン選択肢
</label>

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

.su-form-radio {
  --su-color-border-radio: black;
  --su-color-border-radio-hover: pink;
  --su-color-border-radio-focus: red;
  --su-color-bg-radio: white;
  --su-color-fill-radio: blue;
  --su-size-radius-radio: 5px;
}

状態別のスタイル

ラジオボタンのコンポーネントはホバー状態やフォーカス時など各状態が明示されるよう異なるスタイルを提供しています。ホバーやフォーカス時には、それぞれアウトラインの色が変化し表示されるようになっています。disabled属性で無効化されている状態では要素自体の透明度が変化し、無効であることが明示されるスタイルが適用されます。

状態別のスタイルはラジオボタン要素に設定されていますが、ラジオボタンの各状態を示すクラスも用意されており、そのクラスを追加で付与することにより対象の状態と同じスタイルが適用できます。su-form-radio-state-checkedのクラスでチェック済みの状態、su-form-radio-state-hoverのクラスでマウスカーソルのホバー状態、su-form-radio-state-focusのクラスでフォーカス時の状態、su-form-radio-state-disabledのクラスで無効化状態と同じスタイルになります。

<!-- チェック済みのスタイル適用 -->
<label>
  <input class="su-form-radio su-form-radio-state-checked" type="radio" role="radio" />チェック済み
</label>

<!-- ホバー状態のスタイル適用 -->
<label>
  <input class="su-form-radio su-form-radio-state-hover" type="radio" role="radio" />ホバー状態
</label>

<!-- フォーカス状態のスタイル適用 -->
<label>
  <input class="su-form-radio su-form-radio-state-focus" type="radio" role="radio" />フォーカス状態
</label>

<!-- 無効化状態のスタイル適用 -->
<label>
  <input class="su-form-radio su-form-radio-state-disabled" type="radio" role="radio" />無効化状態
</label>

アクセシビリティの支援

ラジオボタンのコンポーネントはアクセシビリティの対応として、role="radio"属性値の設定や、input要素に対してaria-describedby属性を使うことで、より詳しくラジオボタン選択肢の説明を案内することができます。そのテキスト要素に対して、su-screen-reader-onlyのクラスを指定することで、スクリーンリーダー向けのテキスト要素として扱うことができ、テキストを非表示とすることができます。

<!-- ラベルテキストに詳しい説明を追加 -->
<label>
  <input class="su-form-radio" type="radio" role="radio" aria-describedby="option1-description" />選択肢1
</label>
<!-- ラベルテキストの説明文要素 -->
<p id="option1-description" class="su-screen-reader-only" >この選択肢は回答が〇〇〇〇の場合に選択します</p>

また、チェック状態や無効化状態に合わせて、aria-checked属性やaria-disabled属性をそれぞれ設定することで、スクリーンリーダーに対して状態を伝えることができます。

<!-- チェック状態に合わせてaria-checked属性を設定 -->
<label>
  <input class="su-form-radio" type="radio" role="radio" aria-checked="true" checked />選択肢1
</label>
<label>
  <input class="su-form-radio" type="radio" role="radio" aria-checked="false" />選択肢2
</label>

<!-- 無効化状態に合わせてaria-disabled属性を設定 -->
<label>
  <input class="su-form-radio" type="radio" role="radio" aria-disabled="true" disabled />選択肢3
</label>