CSS のみの Tailwind CSS 入力。プライマリ、セカンダリ、アクセント、セマンティック カラー バリアントが含まれます。サイズは xs ～ xl、プレフィックスとサフィックスのアドオン スロット、ゴースト スタイル。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
入力コンポーネントは、テキスト フィールド、電子メール、パスワード、その他の入力タイプを通じてユーザー データを取得します。 Frutjam 入力システムは、複数のサイズ、色、検証状態に対応する Tailwind CSS スタイルを備えたセマンティック HTML フォーム コントロールを提供します。アクセシビリティと応答性の高い動作を考慮して設計されており、入力はフォーム検証ライブラリおよびフレームワークとシームレスに統合されます。
CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
| クラス | タイプ | 説明 |
|---|---|---|
| input | ベース | スタイル付きのテキスト入力フィールド |
| input-outline | スタイル | 境界線が見える透明な塗りつぶし |
| input-soft | スタイル | 落ち着いた色合いの背景 |
| input-ghost | スタイル | 焦点を合わせるまで境界線が表示されない |
| input-dashed | スタイル | 破線の境界線スタイル |
| input-square | スタイル | 境界半径なし |
| input-disabled | 修飾子 | 非入力要素の無効な外観 |
| input-xs | サイズ | 極小 |
| input-sm | サイズ | 小さい |
| input-md | サイズ | 中 (デフォルト) |
| input-lg | サイズ | 大きい |
| input-xl | サイズ | 特大 |
| input-2xl | サイズ | 特大×2 |
| input-primary | 色 | 主要テーマの色の境界線 |
| input-secondary | 色 | 二次テーマの色の境界線 |
| input-accent | 色 | アクセントテーマカラーのボーダー |
| input-neutral | 色 | ニュートラルテーマカラーの境界線 |
| input-info | 色 | 情報セマンティックカラーボーダー |
| input-success | 色 | 成功のセマンティックカラーボーダー |
| input-warning | 色 | 警告セマンティックカラー境界線 |
| input-error | 色 | エラーセマンティックカラーボーダー |
基本的な使い方
<input type="text" placeholder="Enter your text here" class="input"> |
<input type="text" placeholder="Enter your text here" className="input"> |
入力サイズ
html
1 2 3 4 5 6 | <input type="text" class="input input-xs" placeholder="Xsmall"> <input type="text" class="input input-sm" placeholder="Small"> <input type="text" class="input input-md" placeholder="Medium"> <input type="text" class="input input-lg" placeholder="Large"> <input type="text" class="input input-xl" placeholder="Xlarge"> <input type="text" class="input input-2xl" placeholder="2XLarge"> |
入力色
html
1 2 3 4 5 6 7 8 9 | <input type="text" class="input" placeholder="Default"> <input type="text" class="input input-primary" placeholder="Primary"> <input type="text" class="input input-secondary" placeholder="Secondary"> <input type="text" class="input input-accent" placeholder="Accent"> <input type="text" class="input input-neutral" placeholder="Neutral"> <input type="text" class="input input-info" placeholder="Info"> <input type="text" class="input input-success" placeholder="Success"> <input type="text" class="input input-warning" placeholder="Warning"> <input type="text" class="input input-error" placeholder="Error"> |
入力スタイル
html
1 2 3 4 5 | <input type="text" class="input" placeholder="Default"> <input type="text" class="input input-outline" placeholder="Outline"> <input type="text" class="input input-soft" placeholder="Soft"> <input type="text" class="input input-dashed" placeholder="Dashed"> <input type="text" class="input input-ghost" placeholder="Ghost"> |
入力正方形
OTP フィールドや PIN フィールドなどの固定幅の 1 文字入力には、input-square を使用します。
html
1 2 3 4 | <input type="text" class="input input-square input-xs" maxlength="1" placeholder="0"> <input type="text" class="input input-square input-sm" maxlength="1" placeholder="0"> <input type="text" class="input input-square input-md" maxlength="1" placeholder="0"> <input type="text" class="input input-square input-lg" maxlength="1" placeholder="0"> |
無効な入力
html
1 2 | <input type="text" class="input" placeholder="Enabled input"> <input type="text" class="input input-disabled" placeholder="Disabled input" disabled> |
ラベル付き入力
html
1 2 3 4 5 6 7 8 9 | <label> <span>Email address</span> <input type="email" class="input input-outline w-full" placeholder="you@example.com"> </label> <label> <span>Password</span> <input type="password" class="input input-outline input-primary w-full" placeholder="Enter password"> </label> |
Claude コード、Cursor、または別の AI エディターを使用していますか?
Cherry MCP は、AI エディタに正確な 入力 クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。