kaze風

Switch

オン・オフを切り替えるトグルスイッチコンポーネント。ラベル付きで使用可能。

GitHub でソースを見る

プレビュー

通知を有効にするダークモード無効状態

使いどころ

使う場面

切り替えた瞬間に設定が反映される項目（通知のオン・オフ、機能の有効化）
状態がオン・オフの 2 つで、保存ボタンがない設定画面
ラベルが現在の状態でなく、対象を指すとき（「メール通知」）

使わない場面

送信ボタンで確定するフォーム。Checkbox を使う（Switch は押した時点で反映される印象を与える）
複数から選ぶこと。Checkbox の並びか FilterPill
1 つだけを選ぶこと。Radio か SegmentedControl
「同意する」のような確認。Checkbox を使う

使い方

<Switch label="通知を有効にする" />
<Switch label="ダークモード" defaultChecked onChange={(v) => console.log(v)} />

プロパティ

名前	型	デフォルト	説明
`label`	`string`	なし	スイッチのラベルテキスト
`checked`	`boolean`	なし	制御モード時のオン・オフ状態
`defaultChecked`	`boolean`	`false`	非制御モード時の初期状態
`disabled`	`boolean`	`false`	無効状態にするかどうか
`onChange`	`(checked: boolean) => void`	なし	状態変更時のコールバック

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

キーボード操作

キー	動作
`Tab`	スイッチにフォーカスを移す
`Space`	オンとオフを切り替える

アクセシビリティ

checkbox に role="switch" を付けた実装。状態はブラウザが読み上げるので、aria-checked は自前で付けない
label を渡すとクリックできる範囲がラベル全体に広がる。ラベルのない単独利用では aria-label を付ける
切り替えが失敗したとき、スイッチを元に戻し、理由を Toast などで伝える

文言

ラベルは対象の名詞で書く（「メール通知」）。「メール通知をオンにする」は状態と二重になる
オンのときに何が起きるかが分からない項目は、description か補足の文を添える

関連するコンポーネント