ユーザー補助スイッチ コントロールを構築する

ウェブ機能: <input type="checkbox" switch> accent-color

<input type="checkbox" switch> で HTML の switch 属性を関連する <label> とともに使用して、ネイティブ フォームの送信、キーボード ナビゲーション、スクリーン リーダーのセマンティクスを保持するバイナリのオン / オフ切り替えを構築します（チェックボックスのスタイル設定とフォームをご覧ください）。

マークアップ

標準のチェックボックス入力にブール値の switch 属性を追加します。

<label>
  Enable notifications
  <input id="notifications" type="checkbox" switch>
</label>
  • ラベルは入力をラップするか、for / id に関連付けることができます。すべてのスタイル設定は入力を対象としているため、ラベル構造に依存しません。
  • オンにすると、入力は標準のチェックボックス値を送信します。JavaScript で、change（または input）イベントをリッスンし、.value ではなく .checked を読み取ります。

スタイル設定

accent-color を使用してコントロールのハイライト色をカスタマイズし（ブランドに一貫したフォームを参照）、フォーカス スタイルが視認できるようにします。

input[type="checkbox"][switch] {
  accent-color: var(--accent-color, #1769e0);
  margin: 0;
  cursor: pointer;
}

input[type="checkbox"][switch]:focus-visible {
  outline: 3px solid var(--focus-color, #ff8c00);
  outline-offset: 4px;
}

代替戦略

switch-control のフォールバックとブラウザ サポート

ベースライン ターゲットが <input type="checkbox" switch> をサポートしていない場合は、'switch' in HTMLInputElement.prototype が false の場合にのみ input-switch-polyfill を読み込みます。ポリフィルを無条件に読み込まないでください。ポリフィルは、role="switch" の設定、スイッチ スタイルの適用（appearance: none）、計算された accent-color の同期、ポインタのドラッグのサポートにより、switch 属性を持つチェックボックスを強化します。

プロジェクトに適したパッケージ読み込み方法を使用してください。以下の例では、設定でモジュール指定子を解決できることを前提としています。

if (!('switch' in HTMLInputElement.prototype)) {
  import('input-switch-polyfill');
}

accent-color のフォールバックとブラウザ サポート

accent-color プロパティはプログレッシブ エンハンスメントです。このプロパティをサポートしていないブラウザでは、このプロパティは無視され、デフォルトの UI カラーが使用されます。