仅 CSS Tailwind CSS 输入，具有主要、次要、重音和语义颜色变体。尺寸 xs-xl，前缀和后缀插件插槽，幽灵风格。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
Input components capture user data through text fields, email, password, and other input types. The Frutjam input system provides semantic HTML form controls with Tailwind CSS styling for multiple sizes, colors, and validation states. Designed for accessibility and responsive behavior, inputs integrate seamlessly with form validation libraries and frameworks.
仅 CSS，无需 JavaScript。 WCAG AA 可访问且与框架无关 - 可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
| 班级 | 类型 | 描述 |
|---|---|---|
| input | 根据 | Styled text input field |
| input-outline | 风格 | 带有可见边框的透明填充 |
| input-soft | 风格 | 柔和的有色背景 |
| input-ghost | 风格 | No visible border until focused |
| input-dashed | 风格 | 虚线边框样式 |
| input-square | 风格 | No border radius |
| input-disabled | 修饰符 | 非输入元素的禁用外观 |
| input-xs | 尺寸 | 特小号 |
| input-sm | 尺寸 | 小的 |
| input-md | 尺寸 | 中（默认） |
| input-lg | 尺寸 | 大的 |
| input-xl | 尺寸 | 特大号 |
| input-2xl | 尺寸 | 2×特大号 |
| input-primary | 颜色 | Primary theme color border |
| input-secondary | 颜色 | Secondary theme color border |
| input-accent | 颜色 | Accent theme color border |
| input-neutral | 颜色 | Neutral theme color border |
| input-info | 颜色 | Info semantic color border |
| input-success | 颜色 | Success semantic color border |
| input-warning | 颜色 | Warning semantic color border |
| input-error | 颜色 | Error semantic color border |
基本用法
<input type="text" placeholder="Enter your text here" class="input"> |
<input type="text" placeholder="Enter your text here" className="input"> |
Input Sizes
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"> |
Input Colors
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"> |
Input Styles
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"> |
Input Square
Use input-square for fixed-width single-character inputs like OTP or PIN fields.
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"> |
Disabled Input
html
1 2 | <input type="text" class="input" placeholder="Enabled input"> <input type="text" class="input input-disabled" placeholder="Disabled input" disabled> |
Input with Label
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 Code、Cursor 或其他 AI 编辑器？
Cherry MCP 为您的 AI 编辑器按需提供准确的 输入 类名称和结构。不再有幻觉课程。