チェックボックス

チェックボックス（単一・複数選択肢）

チェックボックス（単一・複数選択肢）のコンポーネントにはsu-form-checkboxのクラス名を付与します。

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

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

<label>
  <input class="su-form-checkbox" type="checkbox" role="checkbox" />チェックボックス選択肢
</label>

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

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

状態別のスタイル

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

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

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

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

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

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

アクセシビリティの支援

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

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

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

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

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