スイッチ

hc-switch は標準の <input type="checkbox" role="switch"> に適用します。土台の input はネイティブの挙動をすべて保ちます — Space で切り替え、値はフォーム送信に参加し、role の上書きによりスクリーンリーダーはスイッチとして読み上げます — 置き換わるのは appearance: none による見た目のクロームだけです。

別名: トグル、トグルスイッチ。

基本の HTML

Email notifications

SMS notifications

<label class="hc-switch-label">
  <input class="hc-switch" type="checkbox" role="switch" checked>
  Email notifications
</label>

<label class="hc-switch-label">
  <input class="hc-switch" type="checkbox" role="switch">
  SMS notifications
</label>

.hc-switch-label は、スイッチとそのテキストをまとめる inline-flex ヘルパーで、ラベルのクリックで input が切り替わります。

バリアント

data-variant は、デフォルト以外のチェック状態の色味として success、warning、error を受け付けます — チェックボックスやラジオと同じ 3 点セットです。デフォルト(省略)のバリアントは、アクティブなカラーテーマの primary の塗りを使います。

Default (themed)

Success

Warning

Error

<label class="hc-switch-label">
  <input class="hc-switch" type="checkbox" role="switch" checked>
  Default (themed)
</label>
<label class="hc-switch-label">
  <input class="hc-switch" type="checkbox" role="switch" data-variant="success" checked>
  Success
</label>
<label class="hc-switch-label">
  <input class="hc-switch" type="checkbox" role="switch" data-variant="warning" checked>
  Warning
</label>
<label class="hc-switch-label">
  <input class="hc-switch" type="checkbox" role="switch" data-variant="error" checked>
  Error
</label>

サイズ

data-size は sm、md(デフォルト)、lg を受け付けます。

Small

Default

Large

<label class="hc-switch-label">
  <input class="hc-switch" type="checkbox" role="switch" data-size="sm" checked>
  Small
</label>
<label class="hc-switch-label">
  <input class="hc-switch" type="checkbox" role="switch" checked>
  Default
</label>
<label class="hc-switch-label">
  <input class="hc-switch" type="checkbox" role="switch" data-size="lg" checked>
  Large
</label>

状態

Focus me with the keyboard to see the ring

Disabled (off)

Disabled (on)

<label class="hc-switch-label">
  <input class="hc-switch" type="checkbox" role="switch" disabled>
  Disabled (off)
</label>
<label class="hc-switch-label">
  <input class="hc-switch" type="checkbox" role="switch" disabled checked>
  Disabled (on)
</label>

htmx での利用

スイッチはネイティブのチェックボックスと同様にフォーム送信へ参加します。即時トグルには change を待ち受けます:

<label class="hc-switch-label">
  <input
    class="hc-switch"
    type="checkbox"
    role="switch"
    name="notifications"
    data-hx-post="/preferences/notifications"
    data-hx-trigger="change">
  Email notifications
</label>

スイッチが素のフォーム POST の一部で、サーバが宣言済みの真偽値にバインドする場合、未チェックのスイッチは何も送信しないことを思い出してください — 公認の真偽値フィールドパターン (同じ name の下に隠し false + スイッチ true)を使います。 hc-switch にそのまま当てはまります。

アクセシビリティ

input には常にラベルを対にしてください。両方を <label class="hc-switch-label"> で包むか、id で関連付けた別の <label for> を使います。
role="switch" は、二値のオン / オフトグルのまさにその セマンティックな role です — 素のチェックボックスより選んでください。スクリーンリーダーが「チェックボックス、チェック済み / 未チェック」ではなく「スイッチ、オン / オフ」と読み上げます。土台の要素はフォームシリアライズのために <input type="checkbox"> のままです。ARIA role の上書きは読み上げ方だけを変えます。
フォーカスのアウトラインを消さないでください。このコンポーネントはデフォルトのアウトラインを、--hc-color-focus-ring で駆動される見える box-shadow リングに置き換えています。
つまみのスライドのトランジションは prefers-reduced-motion: reduce を尊重します — ユーザーがオプトアウトしていれば動きは抑制されます。

テーマ用トークン

component トークン(component.tokens.json):

トークンパス	用途
`switch.width` / `height`	トラックの寸法。
`switch.thumb-size`	動くつまみの直径。
`switch.padding`	つまみとトラック端の隙間。
`switch.bg` / `thumb-bg`	オフ状態の色。
`switch.checked-bg` / `checked-border`	デフォルトバリアントのオン状態。
`switch.success-checked-bg` / `warning-checked-bg` / `error-checked-bg`	バリアントのオン状態。
`switch.disabled-bg`	無効時の背景。
`switch.label-gap`	スイッチとテキストの間のギャップ。
`switch.sm.` / `lg.`	専用の sm / lg 上書き。

CSS 変数

生成される CSS 変数を表示

--hc-switch-width | -height | -thumb-size | -padding
--hc-switch-border-width | -border
--hc-switch-bg | -thumb-bg
--hc-switch-checked-bg | -checked-border
--hc-switch-success-checked-bg | -warning-checked-bg | -error-checked-bg
--hc-switch-disabled-bg | -label-gap
--hc-switch-sm-width | -sm-height | -sm-thumb-size
--hc-switch-lg-width | -lg-height | -lg-thumb-size
--hc-color-focus-ring (inherited from data-color)