トグルスイッチ
component設定の ON/OFF を切り替えるスイッチです。切り替えた結果はその場ですぐに反映されます。保存ボタンで後から確定する項目にはチェックボックスを使ってください。
body × state
size = medium
size
small (36×20) / medium (44×24)。特段の理由がなければ medium を使う
small
medium
使用例 — 通知設定
ラベル全体がクリック / タップでき、Tab + Space でも切り替えられます
機能
このコンポーネントの用途
設定の ON/OFF を切り替え、結果が即座に反映されるフォーム部品。
送信ボタンで後から確定する項目は checkbox、絞り込みのトグルは filter-chip。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓input type="checkbox" role="switch" を switch-label で囲み、ラベル全体を押せるようにする。
- ✓切り替えた結果は即座に反映する（保存ボタンを待たない設定に使う）。
NG
- ✕フォーム送信で確定する入力に使わない → checkbox を使う。
- ✕ラベルを状態で言い換えない（ON にする/OFF にする 等）→ 状態はスイッチ自体が示すので、ラベルは「通知を受け取る」のような機能名で固定する。
即時反映は switch・保存確定は checkbox
用途の使い分け
切り替えた瞬間に反映される設定は switch。保存ボタンは不要。
<label class="switch-label">メールで通知 <input type="checkbox" role="switch" class="switch" /> </label>
保存ボタンで確定する同意・フォーム項目に switch を使わない → checkbox を使う。
<label class="checkbox-label">利用規約に同意する <input type="checkbox" class="checkbox" /> </label>
ラベルで「何の設定か」を明示
クリック領域とアクセシブルネームswitch-label で「何の設定か」を内包。文字クリックでも切替でき、名前も結び付く。
<label class="switch-label"> <input type="checkbox" role="switch" class="switch" />ダークモード </label>
ラベルの無い裸のスイッチにしない。何の設定か伝わらず、SR でも名前が読まれない。
<input type="checkbox" role="switch" class="switch" /> <!-- ラベルなし -->
トグルスイッチのアクセシビリティ
スイッチは <input type="checkbox" role="switch"> ベースで、SR には「スイッチ、オン / オフ」と読まれます。切り替えは即時反映が前提です。WCAG 2.2 全基準は アクセシビリティ ページを参照。
期待される配慮
Presentation / Adaptability / Interaction / Assistive Technology
オン / オフはつまみの位置と色で示し、ラベルで「何の設定か」を明示する。色だけに頼らない。
文字は rem / トークンで拡大に追従。md（44×24）は高さ 24px でターゲット最小を満たす。
Tab で到達し Space で切替。ラベルのテキストクリックでも切り替わり、結果は即時反映される。
role="switch" により「スイッチ、オン / オフ」と読まれる。ラベルの関連付けが前提。
DS が担保する機能
追加実装なしで満たされる
- ✓ネイティブ
input[type=checkbox]＋role="switch"— 役割・名前・オン/オフ状態が標準で確立 - ✓フォーカスリング
--shadow-focus-ring（:focus） - ✓
switch-labelがクリック領域を広げ、ラベルを名前に結び付ける - ✓
md（44×24）は高さ 24px でターゲット最小（WCAG 2.5.8）を満たす
実装時の必須対応
プロダクト側で担保する
- !各スイッチにラベル（
switch-labelで内包 かaria-labelledby） - !即時反映の操作に使う。保存ボタンで確定する項目は
checkbox - !
switch-sm（高さ 20px）はラベル併用でタッチ領域 24px 以上を確保する - !オン / オフのラベルは肯定形で（「通知を受け取る」）、状態を色だけで表さない
テスト方法
キーボード / スクリーンリーダー / 自動チェック
| キー | 動作 |
|---|---|
| Tab / Shift+Tab | 各スイッチへ移動する |
| Space | オン / オフを切り替える（即時反映） |
- SR「スイッチ、オン / オフ」とラベルが読まれる
- 操作ラベルのテキストをクリックして切り替えられる
- 自動axe / Lighthouse で
role="switch"・ラベル関連付け・コントラストを確認
sm はラベル併用でターゲットを確保
達成基準：WCAG 2.5.8 ターゲットのサイズ（最低限）
高さ 20px の sm も、switch-label で包めばラベル分だけタッチ領域が広がる。
<label class="switch-label"> <input … class="switch switch-sm" />通知を受け取る </label>
裸の sm スイッチ単体は高さ 20px で、ターゲット最小 24px に届かない。
<input … class="switch switch-sm" /> <!-- 20px・ラベルなし -->