F-003 Form simple

How to create a checkbox radio buttons チェックボックス＆ラジオの作り方

Animated custom checkboxes and radio buttons. アニメーションするカスタムチェックボックスとラジオボタン。

form checkbox radio animation

ライブデモ Live Demo

チェックボックス Checkbox
ラジオボタン Radio Buttons

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Animated custom checkboxes and radio buttons.

アニメーションするカスタムチェックボックスとラジオボタン。

どこで使うかWhere to use

contact form, signup flow, checkout form, search interface

フォーム、設定パネル、チェックリスト、フィルターグループ、アンケート

特徴Key features

Animated custom checkboxes and radio buttons replacing native form controls. CSS-only checkmark/dot animation on select. Preserves native form submission. Supports checked, indeterminate, and disabled states.

ネイティブフォームコントロールを置き換えるアニメーションカスタムチェックボックスとラジオボタン。選択時のCSSオンリーチェックマーク/ドットアニメーション。ネイティブフォーム送信を保持。チェック済み・不確定・無効状態をサポート。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--check-speed—Transition speed
--check-color—Checked background color

実装コード Implementation Code 

<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>
:root {
  --check-size: 24px;
  --check-color: #5c6ac4;
  --check-radius: 6px;
}
/*.checkmark uses var(--check-size) etc.*/
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>
  );
}
/* F-003: Checkbox & Radio - see global.css for base styles */
.custom-check {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  cursor: pointer;
  user-select: none;
}

.custom-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkmark {
  width: 24px;
  height: 24px;
  border: 2px solid #e0e4f0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.checkmark svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.3s ease 0.1s;
}

.custom-check input:checked~.checkmark {
  background: #5c6ac4;
  border-color: #5c6ac4;
  transform: scale(1.1);
}

.custom-check input:checked~.checkmark svg {
  stroke-dashoffset: 0;
}

.radiomark {
  width: 24px;
  height: 24px;
  border: 2px solid #e0e4f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.radiomark::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5c6ac4;
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-check input:checked~.radiomark {
  border-color: #5c6ac4;
}

.custom-check input:checked~.radiomark::after {
  transform: scale(1);
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

The native <input> is visually hidden but remains in the DOM for form submission and accessibility. A <label> contains the hidden input and a custom styled <span> (the visual control). CSS :checked + span selectors animate the custom span's background, border, and a ::after pseudo-element (checkmark/dot) into view.

ネイティブ<input>はフォーム送信とアクセシビリティのためにDOMに残りつつ視覚的に非表示。<label>が非表示の入力とカスタムスタイルの<span>（ビジュアルコントロール）を含みます。CSS :checked + spanセレクターがカスタムspanの背景・ボーダー・::after疑似要素（チェックマーク/ドット）をアニメーションで表示します。

カスタマイズ方法Customization

Change the checkmark shape using SVG path in ::after content or a background-image URL. Add a scale bounce animation on check for tactile feedback. Style the label text to strike-through when checked for a to-do list variant.

::after contentのSVGパスまたはbackground-image URLを使用してチェックマークの形状を変更。チェック時に触感フィードバックのためのスケールバウンスアニメーションを追加。ToDoリストバリアントのためにチェック済み時にラベルテキストに取り消し線をスタイリング。

注意点Caveats

Never remove the native input from the DOM — only visually hide it. This ensures keyboard navigation (Space to toggle), screen reader announcement, and form submission all work natively without extra ARIA.

ネイティブ入力をDOMから削除せず視覚的に非表示にするだけにしてください。これによりキーボードナビゲーション（スペースでトグル）・スクリーンリーダーのアナウンス・フォーム送信が追加のARIAなしでネイティブに機能します。

よくある質問 Frequently Asked Questions

How to customize the checkbox & radio buttons? Checkbox & Radio Buttonsをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the checkbox & radio buttons in React? ReactでCheckbox & Radio Buttonsを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of checkbox & radio buttons? Checkbox & Radio Buttonsのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.