CSS のみの Tailwind CSS チェックボックス。プライマリ、セカンダリ、アクセント、セマンティック カラー バリエーションが含まれます。サイズはxs〜xl、状態は不明です。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
チェックボックス コンポーネントを使用すると、ユーザーはセットから 1 つまたは複数のオプションを選択できます。ネイティブ HTML 入力要素で構築され、Tailwind CSS で強化されたチェックボックスは、複数のサイズ、色、状態をサポートします。キーボード ナビゲーションとスクリーン リーダーのサポートにより完全にアクセスでき、チェックボックスはフォーム、フィルター オプション、権限管理インターフェイスでシームレスに機能します。
CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
| クラス | タイプ | 説明 |
|---|---|---|
| checkbox | ベース | スタイル付きチェックボックス入力 |
| checkbox-circle | スタイル | 完全に円形のチェックボックス |
| checkbox-rounded | スタイル | 適度に丸みを帯びたチェックボックス |
| checkbox-square | スタイル | 四捨五入のない正方形のチェックボックス |
| checkbox-disabled | 修飾子 | 非入力要素の無効な外観 |
| checkbox-xs | サイズ | 極小 |
| checkbox-sm | サイズ | 小さい |
| checkbox-md | サイズ | 中 (デフォルト) |
| checkbox-lg | サイズ | 大きい |
| checkbox-xl | サイズ | 特大 |
| checkbox-2xl | サイズ | 特大×2 |
| checkbox-primary | 色 | 主要なテーマカラー |
| checkbox-secondary | 色 | 二次テーマカラー |
| checkbox-accent | 色 | アクセントのテーマカラー |
| checkbox-neutral | 色 | ニュートラルなテーマカラー |
| checkbox-info | 色 | 情報セマンティックカラー |
| checkbox-success | 色 | 成功のセマンティックカラー |
| checkbox-warning | 色 | 警告セマンティックカラー |
| checkbox-error | 色 | エラー セマンティック カラー |
基本的な使い方
<input type="checkbox" checked="checked" class="checkbox"> |
<input type="checkbox" checked="checked" className="checkbox"> |
チェックボックスのサイズ
html
1 2 3 4 5 6 | <input type="checkbox" checked="checked" class="checkbox checkbox-xs"> <input type="checkbox" checked="checked" class="checkbox checkbox-sm"> <input type="checkbox" checked="checked" class="checkbox checkbox-md"> <input type="checkbox" checked="checked" class="checkbox checkbox-lg"> <input type="checkbox" checked="checked" class="checkbox checkbox-xl"> <input type="checkbox" checked="checked" class="checkbox checkbox-2xl"> |
チェックボックスの色
html
1 2 3 4 5 6 7 8 9 | <input type="checkbox" checked="checked" class="checkbox"> <input type="checkbox" checked="checked" class="checkbox checkbox-primary"> <input type="checkbox" checked="checked" class="checkbox checkbox-secondary"> <input type="checkbox" checked="checked" class="checkbox checkbox-accent"> <input type="checkbox" checked="checked" class="checkbox checkbox-info"> <input type="checkbox" checked="checked" class="checkbox checkbox-success"> <input type="checkbox" checked="checked" class="checkbox checkbox-warning"> <input type="checkbox" checked="checked" class="checkbox checkbox-error"> <input type="checkbox" checked="checked" class="checkbox checkbox-neutral"> |
無効なチェックボックス
html
1 2 | <input type="checkbox" class="checkbox" disabled=""> <input type="checkbox" class="checkbox" disabled="" checked="checked"> |
チェックボックスの形状
四角いチェックボックス
html
<input type="checkbox" class="checkbox checkbox-square" checked="checked"> |
円/角丸チェックボックス
checkbox-circle と checkbox-rounded の両方のクラスは同じ視覚スタイルになり、柔軟な命名規則が可能になります。
html
1 2 | <input type="checkbox" class="checkbox checkbox-circle" checked="checked"> <input type="checkbox" class="checkbox checkbox-rounded" checked="checked"> |
ラベル付きチェックボックス
html
1 2 | <input type="checkbox" class="checkbox checkbox-circle checkbox-sm" id="newsletter" name="newsletter" checked="checked"> <label for="newsletter">Subscribe to our newsletter</label> |
Claude コード、Cursor、または別の AI エディターを使用していますか?
Cherry MCP は、AI エディタに正確な チェックボックス クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。