AI向け説明AI Description

I-006 はスイッチ本体に背景色、::after でノブを描画し、.on クラスでノブを translateX でスライドさせます。role="switch" と aria-checked でアクセシビリティ対応。

I-006 uses background for track and ::after for knob; .on class slides the knob with translateX. Use role="switch" and aria-checked for accessibility.

調整可能パラメータParameters

• --toggle-duration, --toggle-width, --toggle-height, --toggle-knob

実装Implementation

HTML + CSS

<button class="toggle-switch" role="switch" aria-checked="false"></button>

.toggle-switch::after { /* knob */ transition: transform 0.25s ease; }
.toggle-switch.on::after { transform: translateX(24px); }

React (JSX + CSS)

// react/I-006.jsx
import { useState } from "react";
import "./I-006.css";

export default function ToggleSwitch({ defaultChecked = false, onChange }) {
  const [checked, setChecked] = useState(defaultChecked);

  const handleClick = () => {
    setChecked((prev) => !prev);
    onChange?.(!checked);
  };

  return (
    <div className="toggle-wrap">
      <button
        type="button"
        className={"toggle-switch" + (checked ? " on" : "")}
        role="switch"
        aria-checked={checked}
        onClick={handleClick}
      />
      <span className="toggle-label">{checked ? "ON" : "OFF"}</span>
    </div>
  );
}

/* react/I-006.css */
:root {
  --toggle-duration: 0.25s;
  --toggle-width: 52px;
  --toggle-height: 28px;
  --toggle-knob: 22px;
}

.toggle-wrap { display: flex; align-items: center; gap: 12px; }

.toggle-switch {
  position: relative;
  width: var(--toggle-width);
  height: var(--toggle-height);
  min-height: var(--toggle-height);
  padding: 0;
  border: none;
  background: #cbd5e0;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--toggle-duration) ease;
  flex-shrink: 0;
}

.toggle-switch.on { background: #5c6ac4; }

.toggle-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: var(--toggle-knob);
  height: var(--toggle-knob);
  margin-top: calc(var(--toggle-knob) / -2);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--toggle-duration) ease;
}

.toggle-switch.on::after {
  transform: translateX(calc(var(--toggle-width) - var(--toggle-knob) - 6px));
}

.toggle-label { font-weight: 600; color: var(--text, #1d2242); }