switch コンポーネントの作成

レスポンシブでアクセスしやすい switch コンポーネントを構築する方法の基本的な概要。

Adam Argyle

この投稿では、Switch コンポーネントの構築方法についての考え方を共有します。デモを試す

デモ

動画で確認したい場合は、YouTube 版の投稿をご覧ください。

概要

スイッチはチェックボックスと同様に機能しますが、ブール値のオンとオフの状態を明示的に表します。

このデモでは、機能の大部分に <input type="checkbox" role="switch"> を使用しています。これには、CSS や JavaScript がなくても完全に機能する、というメリットがあります。CSS を読み込むと、右から左の言語、垂直性、アニメーションなどがサポートされます。JavaScript を読み込むと、スイッチをドラッグして操作できるようになります。

カスタム プロパティ

次の変数は、スイッチのさまざまな部分とそのオプションを表します。最上位クラスである .gui-switch には、コンポーネントの子全体で使用されるカスタム プロパティと、一元化されたカスタマイズ用のエントリ ポイントが含まれています。

トラック

長さ（--track-size）、パディング、2 色:

.gui-switch {
  --track-size: calc(var(--thumb-size) * 2);
  --track-padding: 2px;

  --track-inactive: hsl(80 0% 80%);
  --track-active: hsl(80 60% 45%);

  --track-color-inactive: var(--track-inactive);
  --track-color-active: var(--track-active);

  @media (prefers-color-scheme: dark) {
    --track-inactive: hsl(80 0% 35%);
    --track-active: hsl(80 60% 60%);
  }
}

サムネイル

サイズ、背景色、インタラクションのハイライト色:

.gui-switch {
  --thumb-size: 2rem;
  --thumb: hsl(0 0% 100%);
  --thumb-highlight: hsl(0 0% 0% / 25%);

  --thumb-color: var(--thumb);
  --thumb-color-highlight: var(--thumb-highlight);

  @media (prefers-color-scheme: dark) {
    --thumb: hsl(0 0% 5%);
    --thumb-highlight: hsl(0 0% 100% / 25%);
  }
}

モーションを抑制

明確なエイリアスを追加して重複を減らすには、メディアクエリ 5 のドラフト仕様に基づいて、PostCSS プラグインを使用して、低モーション設定のユーザー メディアクエリをカスタム プロパティに配置します。

@custom-media --motionOK (prefers-reduced-motion: no-preference);

マークアップ

<input type="checkbox" role="switch"> 要素を <label> でラップし、チェックボックスとラベルの関連付けの曖昧さを回避するために関係をバンドルし、ユーザーがラベルを操作して入力を切り替えられるようにしました。

<label for="switch" class="gui-switch">
  Label text
  <input type="checkbox" role="switch" id="switch">
</label>

<input type="checkbox"> には、API と状態がプリビルドされています。ブラウザは、checked プロパティと、oninput や onchanged などの入力イベントを管理します。

レイアウト

このコンポーネントのスタイルを維持するには、Flexbox、グリッド、カスタム プロパティが重要です。値を一元化し、あいまいな計算や領域に名前を付けます。また、小さなカスタム プロパティ API を有効にして、コンポーネントを簡単にカスタマイズします。

.gui-switch

スイッチの最上位レイアウトは flexbox です。クラス .gui-switch には、子がレイアウトの計算に使用するプライベート カスタム プロパティとパブリック カスタム プロパティが含まれています。

.gui-switch {
  display: flex;
  align-items: center;
  gap: 2ch;
  justify-content: space-between;
}

Flexbox レイアウトの拡張と変更は、他の Flexbox レイアウトの変更と同じです。たとえば、スイッチの上または下にラベルを配置したり、flex-direction を変更したりするには、次のようにします。

<label for="light-switch" class="gui-switch" style="flex-direction: column">
  Default
  <input type="checkbox" role="switch" id="light-switch">
</label>

トラック

チェックボックス入力は、通常の appearance: checkbox を削除し、代わりに独自のサイズを指定して、スイッチ トラックとしてスタイル設定されます。

.gui-switch > input {
  appearance: none;

  inline-size: var(--track-size);
  block-size: var(--thumb-size);
  padding: var(--track-padding);

  flex-shrink: 0;
  display: grid;
  align-items: center;
  grid: [track] 1fr / [track] 1fr;
}

また、サムネイルが申し立てを行うための 1 つずつ単一セルのグリッド トラック領域も作成されます。

サムネイル

スタイル appearance: none を使用すると、ブラウザによって提供される視覚的なチェックマークも削除されます。このコンポーネントは、疑似要素と入力の :checked 疑似クラスを使用して、この視覚的なインジケーターを置き換えます。

つまみは input[type="checkbox"] にアタッチされた疑似要素の子であり、グリッド領域 track を要求することでトラックの下ではなく、トラックの上にスタックされます。

.gui-switch > input::before {
  content: "";
  grid-area: track;
  inline-size: var(--thumb-size);
  block-size: var(--thumb-size);
}

警告: すべての入力に疑似要素を設定できるわけではありません。詳しくは、こちらをご覧ください。

スタイル

カスタム プロパティを使用すると、カラーパターン、右から左に記述する言語、モーションの設定に適応する多目的なスイッチ コンポーネントを利用できます。

タッチ操作のスタイル

モバイルでは、ブラウザがラベルと入力にタップによるハイライト表示とテキスト選択機能を追加します。これらの変更は、この切り替えに必要なスタイルと視覚的なインタラクションのフィードバックに悪影響を及ぼしました。数行の CSS を入力することで、それらの効果を削除し、独自の cursor: pointer スタイルを追加できます。

.gui-switch {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

これらのスタイルは、有益な視覚的なインタラクション フィードバックになる可能性があるため、必ずしも削除する必要はありません。削除する場合は、カスタムの代替手段を必ず提供してください。

トラック

この要素のスタイルは主に形状と色に関するもので、親の .gui-switch からカスケード経由でアクセスします。

.gui-switch > input {
  appearance: none;
  border: none;
  outline-offset: 5px;
  box-sizing: content-box;

  padding: var(--track-padding);
  background: var(--track-color-inactive);
  inline-size: var(--track-size);
  block-size: var(--thumb-size);
  border-radius: var(--track-size);
}

スイッチトラックのさまざまなカスタマイズ オプションは、4 つのカスタム プロパティから取得されます。appearance: none ではすべてのブラウザでチェックボックスの境界線が削除されないため、border: none が追加されました。

サムネイル

サムネイル要素はすでに右側の track にありますが、円のスタイルが必要です。

.gui-switch > input::before {
  background: var(--thumb-color);
  border-radius: 50%;
}

インタラクション

カスタム プロパティを使用して、ホバー ハイライトとサムネイルの位置変更を表示するインタラクションに備えます。モーションまたはカーソルを合わせたハイライト表示のスタイルを移行する前に、ユーザーの設定も確認されます。

.gui-switch > input::before {
  box-shadow: 0 0 0 var(--highlight-size) var(--thumb-color-highlight);

  @media (--motionOK) { & {
    transition:
      transform var(--thumb-transition-duration) ease,
      box-shadow .25s ease;
  }}
}

親指の位置

カスタム プロパティは、トラック内の再生位置を設定するための単一ソースのメカニズムを提供します。トラックとつまみのサイズ（0% と 100%）を自由に使用して、つまみをトラック内で適切にオフセットするために計算に使用します。

input 要素は位置変数 --thumb-position を所有し、つまみ疑似要素はこれを translateX の位置として使用します。

.gui-switch > input {
  --thumb-position: 0%;
}

.gui-switch > input::before {
  transform: translateX(var(--thumb-position));
}

--thumb-position を、CSS やチェックボックス要素で提供される疑似クラスから変更できるようになりました。この要素で先ほど transition: transform var(--thumb-transition-duration) ease を条件付きで設定したため、変更時にこれらの変更がアニメーション化される場合があります。

/* positioned at the end of the track: track length - 100% (thumb width) */
.gui-switch > input:checked {
  --thumb-position: calc(var(--track-size) - 100%);
}

/* positioned in the center of the track: half the track - half the thumb */
.gui-switch > input:indeterminate {
  --thumb-position: calc(
    (var(--track-size) / 2) - (var(--thumb-size) / 2)
  );
}

この連携による連携はうまくいっていると思っています。thumb 要素は、1 つのスタイル（translateX 位置）のみを対象としています。入力ではすべての複雑さと計算を 管理できます

注: これは、すべてのコンピューティング、アクション、副作用（親トラック要素）をストアで一元管理するリアクティブ ステート ストアを彷彿とさせます。サブスクライバー（サムネイル疑似要素）は、ロジックの所有や複製を気にせずに動的な値を監視できます。1 つのストア、多数の定期購入者、すべて正しい値。

業種

サポートは、input 要素に CSS 変換による回転を追加する修飾子クラス -vertical で行われました。

3D 回転要素はコンポーネントの全体的な高さを変えないため、ブロック レイアウトが崩れる可能性があります。--track-size 変数と --track-padding 変数を使用して、このことを考慮に入れます。レイアウト内で垂直ボタンが流れるために必要な最小スペースの量を想定どおりに計算します。

.gui-switch.-vertical {
  min-block-size: calc(var(--track-size) + calc(var(--track-padding) * 2));

  & > input {
    transform: rotate(-90deg);
  }
}

（RTL）右から左

CSS の友人である Elad Schecter と私は、単一の変数を反転することで、右から左の言語を処理する CSS 変換を使用してスライドアウト サイドメニューのプロトタイプを作成しました。これは、CSS に論理プロパティ変換がないため、今後もそうならない可能性があるためです。Elad は、カスタム プロパティ値を使用してパーセンテージを反転させ、論理変換用の独自のカスタム ロジックを 1 か所で管理できるようにすることを考えていました。このスイッチでも同じ手法を使用しましたが、うまく機能したと思います。

.gui-switch {
  --isLTR: 1;

  &:dir(rtl) {
    --isLTR: -1;
  }
}

--isLTR というカスタム プロパティは、最初は 1 の値を保持します。つまり、レイアウトがデフォルトで左から右であるため、true です。次に、CSS 疑似クラス :dir() を使用して、コンポーネントが右から左のレイアウト内にある場合、値が -1 に設定されます。

変換内の calc() 内で --isLTR を使用して、--isLTR を実行します。

.gui-switch.-vertical > input {
  transform: rotate(-90deg);
  transform: rotate(calc(90deg * var(--isLTR) * -1));
}

これで、垂直スイッチの回転は、右から左へのレイアウトで必要とされる反対側の位置になります。

反対側の要件を考慮して、サムネイル疑似要素の translateX 変換も更新する必要があります。

.gui-switch > input:checked {
  --thumb-position: calc(var(--track-size) - 100%);
  --thumb-position: calc((var(--track-size) - 100%) * var(--isLTR));
}

.gui-switch > input:indeterminate {
  --thumb-position: calc(
    (var(--track-size) / 2) - (var(--thumb-size) / 2)
  );
  --thumb-position: calc(
   ((var(--track-size) / 2) - (var(--thumb-size) / 2))
    * var(--isLTR)
  );
}

このアプローチは、論理 CSS 変換などのコンセプトに関するすべてのニーズを解決するものではありませんが、多くのユースケースでDRY 原則を提供します。

州

組み込みの input[type="checkbox"] を使用する場合は、:checked、:disabled、:indeterminate、:hover などのさまざまな状態を処理する必要があります。:focus は意図的に放置し、オフセットのみを調整しました。Firefox と Safari ではフォーカス リングの表示が良好でした。

Chromium は、Firefox や Safari で見られる丸みを帯びたフォーカス リングのスタイルに追いつきます。こちらの手順に沿って操作してください。

オン

<label for="switch-checked" class="gui-switch">
  Default
  <input type="checkbox" role="switch" id="switch-checked" checked="true">
</label>

この状態は on 状態を表します。この状態の場合、入力「トラック」の背景はアクティブな色に設定され、スライダーの位置は「最後」に設定されます。

.gui-switch > input:checked {
  background: var(--track-color-active);
  --thumb-position: calc((var(--track-size) - 100%) * var(--isLTR));
}

無効

<label for="switch-disabled" class="gui-switch">
  Default
  <input type="checkbox" role="switch" id="switch-disabled" disabled="true">
</label>

:disabled ボタンは視覚的に異なるだけでなく、要素を不変にする必要があります。操作の不変性はブラウザから独立していますが、appearance: none を使用するため、視覚状態にはスタイルが必要です。

.gui-switch > input:disabled {
  cursor: not-allowed;
  --thumb-color: transparent;

  &::before {
    cursor: not-allowed;
    box-shadow: inset 0 0 0 2px hsl(0 0% 100% / 50%);

    @media (prefers-color-scheme: dark) { & {
      box-shadow: inset 0 0 0 2px hsl(0 0% 0% / 50%);
    }}
  }
}

この状態は、無効とチェック済みの両方の状態のダークモードとライトモードが必要になるため、扱いが難しい状態です。スタイルの組み合わせによるメンテナンスの負担を軽減するために、これらの状態には最小限のスタイルを選択しました。

不確定

忘れがちな状態が :indeterminate です。この状態のチェックボックスはオンでもオフでもありません。楽しい状態であり、魅力的で控えめです。ブール値の状態は状態間に隠れてしまう場合があるので注意してください。

チェックボックスを未確定に設定するのは難しい作業です。JavaScript でのみ設定できます。

<label for="switch-indeterminate" class="gui-switch">
  Indeterminate
  <input type="checkbox" role="switch" id="switch-indeterminate">
  <script>document.getElementById('switch-indeterminate').indeterminate = true</script>
</label>

私にとって、この状態は控えめで魅力的であるため、スイッチの親指の位置を中央に配置するのが適切だと思いました。

.gui-switch > input:indeterminate {
  --thumb-position: calc(
    calc(calc(var(--track-size) / 2) - calc(var(--thumb-size) / 2))
    * var(--isLTR)
  );
}

カーソルを合わせる

マウスオーバー操作では、接続された UI を視覚的にサポートし、インタラクティブな UI への方向性も提供する必要があります。このスイッチでは、ラベルまたは入力にカーソルを合わせると、つまみが半透明のリングでハイライト表示されます。このホバー アニメーションにより、インタラクティブな親指要素への方向性が提示されます。

「ハイライト」効果は box-shadow で行われます。無効にしていない入力にカーソルを合わせると、--highlight-size のサイズを大きくします。ユーザーがモーションに同意した場合は、box-shadow が拡大して移行します。ユーザーがモーションに同意しなかった場合は、ハイライトがすぐに表示されます。

.gui-switch > input::before {
  box-shadow: 0 0 0 var(--highlight-size) var(--thumb-color-highlight);

  @media (--motionOK) { & {
    transition:
      transform var(--thumb-transition-duration) ease,
      box-shadow .25s ease;
  }}
}

.gui-switch > input:not(:disabled):hover::before {
  --highlight-size: .5rem;
}

JavaScript

注: このスクリプトは省略可能です。

私には、スイッチのインターフェースが物理インターフェース、特にトラック内に円があるような物理インターフェースをエミュレートしようとすると不思議に思えるかもしれません。iOS ではスイッチを使用してこれを可能にし、左右にドラッグできます。オプションがあるのはとても満足です。逆に、ドラッグ操作を試しても何も起こらない場合、UI 要素は非アクティブな状態になることがあります。

ドラッグ可能なサムネイル

サムネイル疑似要素は、.gui-switch > input スコープの var(--thumb-position) から位置を受け取ります。JavaScript は入力にインライン スタイル値を指定することで、サムネイルの位置を動的に更新し、ポインタ ジェスチャーに追従するように見せることができます。ポインタが離されたら、インライン スタイルを削除し、カスタム プロパティ --thumb-position を使用して、ドラッグがオフに近いかオンに近いかを判断します。これはソリューションのバックボーンです。ポインタ イベントは、ポインタの位置を条件付きでトラッキングして CSS カスタム プロパティを変更します。

このスクリプトが表示される前にコンポーネントはすでに 100% 機能していたため、ラベルをクリックして入力を切り替えるなどの既存の動作を維持するにはかなりの作業が必要です。JavaScript で既存の機能を犠牲にして機能を追加しないでください。

touch-action

ドラッグはカスタム ジェスチャーであるため、touch-action のメリットを享受するのに適しています。この切り替えの場合、水平方向のジェスチャーはスクリプトで処理するか、垂直方向の切り替えバリアント用にキャプチャされた垂直方向のジェスチャーを処理する必要があります。touch-action を使用すると、この要素で処理するジェスチャーをブラウザに指示できるため、スクリプトは競合することなくジェスチャーを処理できます。

次の CSS は、ポインタ ジェスチャーがこのスイッチトラック内から開始されたときに、垂直方向のジェスチャーを処理し、水平方向のジェスチャーは何もしないようブラウザに指示します。

.gui-switch > input {
  touch-action: pan-y;
}

ページのパンやスクロールもしない水平方向のジェスチャーが望まれます。ポインタは、入力内から垂直方向にスクロールを開始し、ページをスクロールできますが、水平方向はカスタム処理されます。

Google Pixel の価値スタイルのユーティリティ

設定時とドラッグ中に、さまざまな計算された数値を要素から取得する必要があります。次の JavaScript 関数は、CSS プロパティを指定して計算されたピクセル値を返します。これは、getStyle(checkbox, 'padding-left') のようにセットアップ スクリプトで使用されます。

​​const getStyle = (element, prop) => {
  return parseInt(window.getComputedStyle(element).getPropertyValue(prop));
}

const getPseudoStyle = (element, prop) => {
  return parseInt(window.getComputedStyle(element, ':before').getPropertyValue(prop));
}

export {
  getStyle,
  getPseudoStyle,
}

window.getComputedStyle() が 2 つ目の引数（ターゲット疑似要素）を受け入れることに注意してください。JavaScript で要素から、疑似要素からでも、これほど多くの値を読み取ることができるのは便利です。

警告: これらの関数は parseInt() を使用します。これは、ピクセル値を返す値をクエリしていると想定しています。つまり、これらの関数を getStyle(element, "display") で使用することはできません。

dragging

これはドラッグ ロジックの中核部分であり、関数のイベント ハンドラでは以下の点に注意する必要があります。

const dragging = event => {
  if (!state.activethumb) return

  let {thumbsize, bounds, padding} = switches.get(state.activethumb.parentElement)
  let directionality = getStyle(state.activethumb, '--isLTR')

  let track = (directionality === -1)
    ? (state.activethumb.clientWidth * -1) + thumbsize + padding
    : 0

  let pos = Math.round(event.offsetX - thumbsize / 2)

  if (pos < bounds.lower) pos = 0
  if (pos > bounds.upper) pos = bounds.upper

  state.activethumb.style.setProperty('--thumb-position', `${track + pos}px`)
}

スクリプトのヒーローは state.activethumb です。このスクリプトはポインタとともにこの小さな円を配置します。switches オブジェクトは Map() で、キーは .gui-switch で、値はスクリプトの効率を維持するためにキャッシュに保存された境界とサイズです。右から左への表示は、CSS の --isLTR と同じカスタム プロパティを使用して処理され、これを使用してロジックを反転し、RTL のサポートを継続できます。event.offsetX も有用です。親指の配置に役立つデルタ値が含まれています。

state.activethumb.style.setProperty('--thumb-position', `${track + pos}px`)

以下の CSS の最終行では、thumb 要素で使用されるカスタム プロパティを設定します。それ以外の場合、この値の割り当ては時間の経過とともに移行しますが、以前のポインタ イベントで --thumb-transition-duration が一時的に 0s に設定されており、遅延していた操作が解消されています。

dragEnd

ユーザーがスイッチの外側にドラッグして離すことができるグローバル ウィンドウ イベントを登録する必要があります。

window.addEventListener('pointerup', event => {
  if (!state.activethumb) return

  dragEnd(event)
})

ユーザーが自由にドラッグできるようにし、インターフェースがそれを考慮に入れられるようにすることが非常に重要だと思います。この切り替えで処理に要する時間はほとんどありませんでしたが、開発プロセスでは慎重な検討が必要でした。

const dragEnd = event => {
  if (!state.activethumb) return

  state.activethumb.checked = determineChecked()

  if (state.activethumb.indeterminate)
    state.activethumb.indeterminate = false

  state.activethumb.style.removeProperty('--thumb-transition-duration')
  state.activethumb.style.removeProperty('--thumb-position')
  state.activethumb.removeEventListener('pointermove', dragging)
  state.activethumb = null

  padRelease()
}

要素の操作が完了しました。確認された入力プロパティを設定し、すべての操作イベントを削除する時間です。チェックボックスが state.activethumb.checked = determineChecked() に変更されています。

determineChecked()

この関数は dragEnd によって呼び出され、つまみ電流がトラックの境界内のどこにあるかを特定し、トラックの半分以上であれば true を返します。

const determineChecked = () => {
  let {bounds} = switches.get(state.activethumb.parentElement)

  let curpos =
    Math.abs(
      parseInt(
        state.activethumb.style.getPropertyValue('--thumb-position')))

  if (!curpos) {
    curpos = state.activethumb.checked
      ? bounds.lower
      : bounds.upper
  }

  return curpos >= bounds.middle
}

その他の考慮事項

ドラッグ操作では、選択した初期の HTML 構造（主に入力をラベルでラップする）により、コードの負債が少し発生しました。ラベルは親要素であるため、入力後にクリック インタラクションを受信します。dragEnd イベントの最後で、padRelease() が奇妙な関数として気づくかもしれません。

const padRelease = () => {
  state.recentlyDragged = true

  setTimeout(_ => {
    state.recentlyDragged = false
  }, 300)
}

これは、ユーザーが行った操作のチェックを解除またはチェックするため、ラベルがこの後のクリックを取得することを考慮しています。

これをもう一度行う場合は、UX のアップグレード時に JavaScript で DOM を調整することを検討します。ラベルのクリック自体を処理し、組み込みの動作と競合しない要素を作成するためです。

この種の JavaScript は私が書くのが最も好きではないので、条件付きイベントのバブリングは管理したくありません。

const preventBubbles = event => {
  if (state.recentlyDragged)
    event.preventDefault() && event.stopPropagation()
}

まとめ

この小さなスイッチ コンポーネントは、これまでのすべての GUI チャレンジの中で最も手間がかかりました。私の方法をご覧になったところで、あなたならどうしますか？

アプローチを多様化し、ウェブで構築するすべての方法を学びましょう。デモを作成して、ツイートしてください。リンクを送信していただければ、下のコミュニティ リミックスのセクションに追加します。

コミュニティ リミックス

• @KonstantinRouda をカスタム要素に置き換え: demo と code。
• ボタン付きの @jhvanderschee: Codepen。

リソース

.gui-switch のソースコードは GitHub にあります。