AI向け説明 AI Description

`F-003` はネイティブのチェックボックスとラジオボタンを非表示にし、カスタムスタイルのインジケーターに置き換えます。チェックマークはSVGの`stroke-dasharray` / `stroke-dashoffset`アニメーションで描画し、ラジオは`::after`擬似要素の`scale`トランジションで表現します。

`F-003` hides native checkbox/radio inputs and replaces them with custom styled indicators. The checkmark uses SVG `stroke-dasharray`/`stroke-dashoffset` animation, while the radio uses a `::after` pseudo-element `scale` transition.

調整可能パラメータ Adjustable Parameters

• --check-speed — トランジション速度Transition speed
• --check-color — チェック時の背景色Checked background color

実装 Implementation

HTML + CSS

<label class="custom-check">
  <input type="checkbox" />
  <span class="checkmark">
    <svg viewBox="0 0 14 14"><polyline points="2 7 5.5 10.5 12 3.5" /></svg>
  </span>
  I agree
</label>

<style>
:root {
  --check-size: 24px;
  --check-color: #5c6ac4;
  --check-radius: 6px;
}
/*.checkmark uses var(--check-size) etc.*/
</style>

React (JSX + CSS)

// react/F-003.jsx
import './F-003.css';

export function CustomCheckbox({ label, checked, onChange }) {
  return (
    <label className="custom-check">
      <input type="checkbox" checked={checked} onChange={onChange} />
      <span className="checkmark">
        <svg viewBox="0 0 14 14"><polyline points="2 7 5.5 10.5 12 3.5" /></svg>
      </span>
      {label}
    </label>
  );
}

export function CustomRadio({ label, name, value, checked, onChange }) {
  return (
    <label className="custom-check">
      <input type="radio" name={name} value={value} checked={checked} onChange={onChange} />
      <span className="radiomark" />
      {label}
    </label>
  );
}