CSS スイッチ生成ツール
チェックボックスをスイッチとして調整し、操作状態とキーボードフォーカスを確認します。
ライブプレビュー
ネイティブチェックボックスの状態
各プレビューはラベルと結び付いたネイティブチェックボックスです。TabとSpaceでキーボード操作とフォーカスの輪郭を確認してください。
使い方
使い方
- トラックの幅、高さ、角丸、余白、遷移速度、3 色を設定します。
- 各状態を確認し、実際の入力で Tab と Space を使います。
- HTML と CSS をコピーし、サンプルのラベルと id を置き換えます。
動作はチェックボックスが担います
実体は appearance を除いた input type=checkbox で、クリック可能な div や隠れた代用品ではありません。フォーカス可能で Space に反応し、支援技術に状態を伝え、フォームにも参加します。即時反映する設定にはスイッチ表示が適し、ラベルで設定を明確にします。
サイズと移動規則
幅と高さがトラックを定義します。ノブは高さから 6px 引いた寸法で、左右に 3px の余白があります。幅は高さより最低 6px 大きく保たれ、選択時は幅と高さの差だけ移動します。実際の UI サイズで確認してください。
フォーカス、無効状態、ローカル出力
:focus-visible の輪郭を残します。無効でも表示され変更できず、不透明度を補助的な合図にします。プレビューとコード生成はブラウザー内で行い、デザイン、色、コードをアップロードしません。コントラスト、サイズ、フォーム動作、文言を確認してください。
よくある質問
あわせて知りたいこと
スイッチはチェックボックスと違いますか？
すぐ反映する設定を説明するチェックボックスをスイッチとして見せることが多く、状態は 2 つです。保存操作の要否は生成ツールが決めません。
フォーカス表示を消せますか？
別の明確な表示なしに消さないでください。Space で変わる対象を示す必要があります。
ノブはなぜ幅と高さの差だけ動きますか？
ノブは高さより 6px 小さく、両側に 3px の余白があります。幅と高さの差を移動すると反対側の余白に到達します。
出力にアクセシブルな名前がありますか？
例では一致する id と for で入力とラベルを結びます。設定名を明確にし、複数使う場合は id を一意にしてください。