Toggle Switch
「ON / OFF」を即時に切り替えるためのスイッチ。保存ボタンを介さず設定がシステムに反映される場面で使用します。
プレビュー
実際にクリックして動作を確認できます。
状態
ON / OFF / Disabled の 3 状態。Disabled はクリックを受け付けません。
ON
OFF
Disabled (ON)
Disabled (OFF)
ラベル付き使用例
実運用では「スイッチ単体」ではなく、何のスイッチかを示すテキストと組み合わせて使います。原則ラベルはスイッチの左側に配置。
着信ポップアップを表示する
通話を自動録音する
AI による自動要約を有効にする
連携先 CRM (未接続のため設定不可)
実装例
import { useState } from "react";
import { ToggleSwitch } from "@/components/ToggleSwitch";
function Example() {
const [enabled, setEnabled] = useState(false);
return (
<ToggleSwitch
checked={enabled}
onChange={setEnabled}
ariaLabel="サンプルトグル"
/>
);
}仕様
- size44 × 24
- radius999px (radius/full)
- 内部 padding2px
- thumb size20 × 20 (border 2px 含む)
- check アイコン12 × 12 (ON 状態のみサム内に表示)
- ON track#0066CC (action/primary)
- OFF track#FFFFFF + 1px border #D1D5DB
- Disabled trackrgba(31,41,55,.08) (overlay/hover)
- ON thumb / checkthumb 白 / check #0066CC (Disabled 時は #9CA3AF)
- OFF thumb#9CA3AF (fill/tertiary)、check 非表示
- Disabled thumb#D1D5DB (fill/disabled)、check 非表示
- アニメーションtransform / background 0.15s ease
利用基準
使うべき時
- 操作した瞬間に結果が反映される設定項目に使う
- 「機能が動いているか」という動作状態の ON / OFF に使う
- ラベルは原則スイッチの左側に配置し、ON にすると何が起きるかを明示する
- ラベル文言は「〜する」「〜機能」など、結果が予測しやすい言葉を選ぶ
使わない時
- 保存ボタンを押すまで確定しないフォーム入力 → Checkbox を使う
- 複数項目から選択させたい → Checkbox を使う
- 「はい / いいえ」を確認させる場面 → Modal / 確認ダイアログを使う
- ON / OFF 以外の中間状態を表現する