トグルスイッチ

トグルスイッチ（真偽値切り替え）

トグルスイッチ（真偽値切り替え）のコンポーネントにはsu-form-toggle-switchのクラス名を付与します。

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

内包するインプット要素は、真偽値を切り替える必要があるため、input[type="checkbox"]を用います。

単一の選択肢において、真偽値の切り替えができるスイッチ型のUIを持つインプット要素です。現在設定されている真偽値の状態がわかりやすく伝わるようにスタイリングされます。

<label>
  <input class="su-form-toggle-switch" type="checkbox" role="switch" />トグルスイッチ選択肢
</label>

トグルスイッチの本体サイズや背景色、角丸半径、またホバーやフォーカス時のアウトラインの色はCSS変数を使って変更することが可能です。

.su-form-toggle-switch {
  --su-color-bg-toggle-switch: gray;
  --su-color-bg-toggle-switch-checked: red;
  --su-color-border-toggle-switch-hover: lime;
  --su-color-border-toggle-switch-focus: blue;
  --su-color-button-toggle-switch: black;
  --su-size-toggle-switch: 32px;
  --su-size-radius-toggle-switch: 4px;
}

状態別のスタイル

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

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

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

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

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

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

アクセシビリティの支援

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

<!-- ラベルテキストに詳しい説明を追加 -->
<label>
  <input class="su-form-toggle-switch" type="checkbox" role="switch" 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-toggle-switch" type="checkbox" role="switch" aria-checked="true" checked />選択肢1
</label>
<label>
  <input class="su-form-toggle-switch" type="checkbox" role="switch" aria-checked="false" />選択肢2
</label>

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