チェックボックス・ラジオボタン（Checkbox / Radio）
複数選択・単一選択・トグルスイッチUIの実装を4つのアプローチで比較。 グループ化・indeterminate状態・Switchコンポーネントなど、実践的なユースケースをインタラクティブに確認できます。
Mantine Checkbox / Radio / Switch
Mantineが提供するフォーム系コンポーネント群。Checkbox・Radio・Switch すべてが統一されたAPIを持ち、 filled/outline バリアント、indeterminate状態、Checkbox.Group / Radio.Group によるグループ化、 onLabel/offLabel を使ったSwitch のカスタマイズが可能。
Checkbox.GroupRadio.GroupSwitch内蔵indeterminate対応5サイズ
読み込み中...
tsx
'use client';
import { useState } from 'react';
import { MantineProvider, Checkbox, Radio, Stack } from '@mantine/core';
import '@mantine/core/styles.css';
const options = ['React', 'Vue', 'Svelte', 'Angular'];
export function MantineCheckboxRadioDemo() {
const [checked, setChecked] = useState<string[]>(['React']);
const [radio, setRadio] = useState('React');
return (
<MantineProvider>
<Stack gap="lg">
<div>
<p className="text-sm font-medium mb-2">Checkbox（複数選択）</p>
<Checkbox.Group value={checked} onChange={setChecked}>
<Stack gap="xs">
{options.map((opt) => (
<Checkbox key={opt} value={opt} label={opt} />
))}
</Stack>
</Checkbox.Group>
</div>
<div>
<p className="text-sm font-medium mb-2">Radio（単一選択）</p>
<Radio.Group value={radio} onChange={setRadio}>
<Stack gap="xs">
{options.map((opt) => (
<Radio key={opt} value={opt} label={opt} />
))}
</Stack>
</Radio.Group>
</div>
</Stack>
</MantineProvider>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Mantineを使ったチェックボックス・ラジオボタンを実装してください。 - 使用ライブラリ: @mantine/core の Checkbox・Radio・Switch コンポーネント - Checkbox.Group で複数選択グループを宣言的に定義 - Radio.Group でラジオボタングループを宣言的に定義 - indeterminate prop でチェックボックスの中間状態を表現 - filled・outline バリアントでスタイルを切り替え - Switch コンポーネントに onLabel・offLabel でカスタムラベルを追加 - disabled prop でグレーアウト＋クリック不可を実現 - xs〜xl の5サイズ（size prop）に対応
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
ライブラリ比較
| 項目 | Mantine | Ant Design | shadcn/ui | CSS カスタム |
|---|---|---|---|---|
| グループ化 | ✅ Checkbox.Group / Radio.Group | ✅ Checkbox.Group / Radio.Group | ✅ RadioGroup / 手動でCheckbox管理 | ⚠️ 手動でstateを管理 |
| indeterminate | ✅ indeterminate prop | ✅ indeterminate prop | ✅ checked="indeterminate" | ⚠️ 自作（SVGで表現） |
| ボタン型Radio | ❌ 標準では非対応 | ✅ Radio.Button | ⚠️ 手動で自作 | ⚠️ 自作（完全自由） |
| Switchコンポーネント | ✅ Switch（onLabel/offLabel） | ✅ Switch（checkedChildren） | ✅ Switch | ⚠️ 自作（CSS transition） |
| サイズバリエーション | ✅ xs〜xl（5段階） | ✅ small / middle / large | ⚠️ 自作（Tailwindで調整） | ✅ 自由に設定可能 |
| カスタムラベル | ✅ onLabel / offLabel | ✅ checkedChildren / unCheckedChildren | ✅ Labelコンポーネントで自由に配置 | ✅ 完全自由 |
| アクセシビリティ | ✅ WAI-ARIA準拠 | ✅ WAI-ARIA準拠 | ✅ WAI-ARIA準拠（Radix UI） | ⚠️ ネイティブinputを活用 |
| フォームライブラリ連携 | ✅ React Hook Form / Zod | ✅ Ant Form との統合 | ✅ React Hook Form連携容易 | ✅ React Hook Form連携容易 |
| バンドルサイズ | ⚠️ 中（全体で大） | ⚠️ 中（全体で大） | ✅ 使った分だけ | ✅ ゼロ追加 |
選択のポイント
- Mantine — Checkbox.Group / Radio.Group による宣言的なグループ化と、filled/outline バリアントで デザインの統一がしやすい。Switch も onLabel/offLabel でリッチに表現できる。 Mantine を採用しているプロジェクトなら一択。
- Ant Design — Radio.Button によるボタン型ラジオが便利で、カレンダーや切り替えUIによく使われる。 indeterminate を使った「全選択」パターンのサポートが手厚く、管理画面向きの実装が揃っている。
- shadcn/ui — Radix UI ベースで WAI-ARIA 完全準拠。Checkbox の indeterminate 状態を標準サポート。 コードが手元にあるためデザインの完全カスタマイズが可能。 React Hook Form との相性も良く、フォーム実装に適している。
- CSS カスタム — デザインシステムに完全準拠したいとき、アニメーションや色を細部まで制御したいときに最適。 ネイティブ input を非表示にしつつアクセシビリティを保持できる。 React Hook Form との連携も素直に書ける。