CSS-only Tailwind CSS radio buttons with primary, secondary, accent, and semantic color variants.サイズはXS〜XL。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
ラジオ ボタン コンポーネントを使用すると、ユーザーは相互に排他的な選択肢のセットからオプションを 1 つだけ選択できます。ネイティブ HTML 入力要素で構築され、Tailwind CSS で強化されたラジオ ボタンは、複数のサイズ、色、状態をサポートします。アクセスしやすく、キーボードで操作できるラジオは、設定の選択、フィルタリング、および単一選択形式の質問に最適です。
CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
| クラス | タイプ | 説明 |
|---|---|---|
| radio | ベース | スタイル付きラジオボタン入力 |
| radio-circle | スタイル | 全円形無線 (デフォルト) |
| radio-rounded | スタイル | 適度に丸みのあるラジオ |
| radio-square | スタイル | 丸みのない四角いラジオ |
| radio-disabled | 修飾子 | 非入力要素の無効な外観 |
| radio-xs | サイズ | 極小 |
| radio-sm | サイズ | 小さい |
| radio-md | サイズ | 中 (デフォルト) |
| radio-lg | サイズ | 大きい |
| radio-xl | サイズ | 特大 |
| radio-2xl | サイズ | 特大×2 |
| radio-primary | 色 | 主要なテーマカラー |
| radio-secondary | 色 | 二次テーマカラー |
| radio-accent | 色 | アクセントのテーマカラー |
| radio-neutral | 色 | ニュートラルなテーマカラー |
| radio-info | 色 | 情報セマンティックカラー |
| radio-success | 色 | 成功のセマンティックカラー |
| radio-warning | 色 | 警告セマンティックカラー |
| radio-error | 色 | エラー セマンティック カラー |
基本的な使い方
1 2 | <input type="radio" name="radio-1" class="radio" checked="checked"> <input type="radio" name="radio-1" class="radio"> |
1 2 | <input type="radio" name="radio-1" className="radio" checked="checked"> <input type="radio" name="radio-1" className="radio"> |
無線機のサイズ
html
1 2 3 4 5 | <input type="radio" name="radio-sizes" class="radio radio-xs" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-sm" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-md" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-lg" checked="checked"> <input type="radio" name="radio-sizes" class="radio radio-xl" checked="checked"> |
ラジオカラー
html
1 2 3 4 5 6 7 8 9 | <input type="radio" name="radio-colors" class="radio" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-primary" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-secondary" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-accent" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-info" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-success" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-warning" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-error" checked="checked"> <input type="radio" name="radio-colors" class="radio radio-neutral" checked="checked"> |
無効な無線
html
1 2 | <input type="radio" class="radio" disabled=""> <input type="radio" class="radio" disabled="" checked="checked"> |
ラジオの形
スクエアラジオ
html
<input type="radio" name="shape-demo" class="radio radio-square" checked="checked"> |
丸いまたは円形のラジオ
html
1 2 | <input type="radio" name="shape-demo2" class="radio radio-circle" checked="checked"> <input type="radio" name="shape-demo2" class="radio radio-rounded" checked="checked"> |
ラベル付きラジオ
html
1 2 3 4 5 6 7 8 | <input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-small" name="size" value="small"> <label for="size-small">Small</label> <input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-medium" name="size" value="medium"> <label for="size-medium">Medium</label> <input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-large" name="size" value="large"> <label for="size-large">Large</label> |
Claude コード、Cursor、または別の AI エディターを使用していますか?
Cherry MCP は、AI エディタに正確な 無線 クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。