Switch

中身は本物のチェックボックスなので、JavaScript がなくても動きます。Asagi（浅葱色）の色違いも入っています。

見本

Notifications Auto-save Public

<label class="switchrow"><span class="switch"><input role="switch" type="checkbox" checked><span class="tr"></span></span>Notifications</label>
<label class="switchrow"><span class="switch asagi"><input role="switch" type="checkbox" checked><span class="tr"></span></span>Auto-save</label>
<label class="switchrow"><span class="switch"><input role="switch" type="checkbox"><span class="tr"></span></span>Public</label>

.switch{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.switch input{position:absolute;opacity:0;inset:0;cursor:pointer;z-index:2;margin:0}
/* The 1px outline keeps the off track 3:1 from the page (WCAG 1.4.11): --k-track alone measured 1.48:1 (light) and 2.29:1 (dark). */
.switch .tr{position:absolute;inset:0;border-radius:var(--k-radius-full);background:var(--k-track);outline:1px solid var(--k-ink-3);outline-offset:-1px;transition:background var(--k-dur-base)}
.switch .tr::after{content:"";position:absolute;inset-inline-start:var(--k-space-1);top:3px;width:18px;height:18px;border-radius:50%;background:var(--k-knob);box-shadow:var(--k-shadow-xs),var(--k-ring-inset);transition:transform var(--k-dur-base)}
.switch input:hover:not(:disabled):not(:checked) + .tr{outline-color:var(--k-ink-2)}
.switch input:checked + .tr{background:var(--k-ink);outline-color:var(--k-ink)}
.switch input:checked + .tr::after{background:radial-gradient(circle at center,var(--k-core) 0 3px,var(--k-knob) 3.6px)}
.switch input:checked + .tr::after{transform:translateX(18px)}
.switch input:focus-visible + .tr{box-shadow:var(--k-ring)}
/* The accent track is 2.88:1 on white; its accent-ink rim keeps the boundary above 3:1. */
.switch.asagi input:checked + .tr{background:var(--k-accent);color:var(--k-on-accent);outline-color:var(--k-accent-ink)}
.switch input:disabled{cursor:not-allowed}
.switch input:disabled + .tr{opacity:.5}
.switchrow{display:inline-flex;align-items:center;gap:var(--k-space-3);font-size:var(--k-text-base);font-family:var(--k-font);color:var(--k-ink)}
/* A switchrow that is a <label> names the switch and makes its text clickable. */
label.switchrow{cursor:pointer}
.switchrow:has(input:disabled){color:var(--k-ink-3);cursor:not-allowed}

[dir="rtl"] .switch input:checked + .tr::after,.switch input:checked:dir(rtl) + .tr::after{transform:translateX(-18px)}

導入

npx @kajisho5/kataui add switch

手動で入れる場合：

tokens.css をページで一度だけ読み込む
CSS タブの中身を、自分のスタイルシートに貼る
HTML タブの中身を、使いたい場所に貼る。

使いどころ

切り替えてすぐに反映される設定に使います。送信ボタンを押してから反映される選択には、Checkbox を使います。

アクセシビリティ

ブラウザ標準のチェックボックスに role="switch" を付けているので、スクリーンリーダーはオン／オフとして読み上げます。スイッチと文を label.switchrow で包むと、その文がスイッチの名前になり、文を押しても切り替わります。文が別の場所にあるとき（設定の行など）は、入力部品に aria-label を付けてください。Space で切り替わり、キーボードで選ぶと --k-ring の枠が出ます。押せない状態は薄く表示され、切り替わりません。オフのときの溝には --k-ink-3 の 1px の枠を付けて、ページとの差を 3:1 以上にしています（溝だけではライトで 1.48:1、ダークで 2.29:1 でした）。アクセント色の溝には --k-accent-ink のふちを付けています（アクセント色だけでは白に対して 2.88:1 です）。丸いつまみは、右から左の表示（RTL）では行の終わり側へ動きます。日本語入力（IME）は関係ありません。スクリーンリーダーを手で確かめるまで Beta のままです。確認したのは Chromium だけです。

キー	動き
`Tab`	スイッチへ移動
`Space`	オン／オフを切り替える

英語版にだけある情報

静的チェックの結果・部品の構造（Anatomy）・読むトークン・使い方の例・関連する部品

英語版の Switch ページで見る →

この訳は、英語版の 2026-11-07 の内容をもとにしています。英語版の文が変わると、テストで知らせます。