トグルスイッチ Toggle Switch
オン/オフを切り替えるスイッチ。設定画面で頻出。
ライブデモ
ソースコード
<div class="demo-toggle-list">
<label class="demo-toggle-row">
<span class="demo-toggle-text">通知</span>
<input type="checkbox" class="demo-toggle-input" checked />
<span class="demo-toggle-track"><span class="demo-toggle-thumb"></span></span>
</label>
<label class="demo-toggle-row">
<span class="demo-toggle-text">ダークモード</span>
<input type="checkbox" class="demo-toggle-input" />
<span class="demo-toggle-track"><span class="demo-toggle-thumb"></span></span>
</label>
<label class="demo-toggle-row">
<span class="demo-toggle-text">自動更新</span>
<input type="checkbox" class="demo-toggle-input" disabled />
<span class="demo-toggle-track"><span class="demo-toggle-thumb"></span></span>
</label>
</div>.demo-toggle-list { display: flex; flex-direction: column; gap: 14px; max-width: 280px; }
.demo-toggle-row {
display: flex; align-items: center; justify-content: space-between;
cursor: pointer;
}
.demo-toggle-text { font-size: 14px; color: #333; }
.demo-toggle-input { display: none; }
.demo-toggle-track {
width: 44px; height: 24px; background: #d1d5db;
border-radius: 12px; position: relative; transition: background 0.3s;
flex-shrink: 0;
}
.demo-toggle-thumb {
width: 20px; height: 20px; background: #fff;
border-radius: 50%; position: absolute; top: 2px; left: 2px;
transition: transform 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.demo-toggle-input:checked + .demo-toggle-track { background: var(--ui-primary); }
.demo-toggle-input:checked + .demo-toggle-track .demo-toggle-thumb { transform: translateX(20px); }
.demo-toggle-input:disabled + .demo-toggle-track { opacity: 0.4; cursor: not-allowed; }
.demo-toggle-input:focus-visible + .demo-toggle-track {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 25%, transparent);
}(function(){
document.querySelectorAll('.demo-toggle-input').forEach(function(input){
input.addEventListener('change', function(){
var label = input.closest('.demo-toggle-label');
if(label) {
var text = label.querySelector('.demo-toggle-text');
if(text) text.textContent = input.checked ? 'ON' : 'OFF';
}
});
});
})();AIプロンプト
Basic
トグルスイッチをHTML/CSSで作ってください。オン/オフを切り替えるスイッチ型のUIです。
Custom
以下の仕様でトグルスイッチを実装してください。 - スムーズなスライドアニメーション - プライマリカラー: #2563eb - ON/OFFのラベル表示 - サイズバリエーション（S/M/L） - ON時にアイコン表示（チェックマーク） - OFF→ONでバウンスアニメーション
Advanced
アクセシビリティ対応のトグルスイッチを実装してください。 - role="switch" + aria-checked を使用 - キーボードでSpaceキーまたはEnterで切り替え - フォーカスリング（:focus-visible） - prefers-reduced-motion でアニメーション無効化 - prefers-contrast: high でハイコントラスト対応 - ラベルとスイッチをaria-labelledbyで紐付け - 状態変更時にaria-liveで通知 - タッチデバイスでスワイプ操作対応