Componente de entrada
Entrada CSS Tailwind somente CSS com variantes de cores primárias, secundárias, de destaque e semânticas. Tamanhos xs–xl, slots adicionais de prefixo e sufixo, estilo fantasma. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
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-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.
| Class | Tipo | Description |
|---|---|---|
| input | Base | Styled text input field |
| input-outline | Style | Transparent fill with a visible border |
| input-soft | Style | Muted tinted background |
| input-ghost | Style | No visible border until focused |
| input-dashed | Style | Dashed border style |
| input-square | Style | No border radius |
| input-disabled | Modifier | Disabled appearance for non-input elements |
| input-xs | Size | Extra small |
| input-sm | Size | Small |
| input-md | Size | Medium (default) |
| input-lg | Size | Large |
| input-xl | Size | Extra large |
| input-2xl | Size | 2× extra large |
| input-primary | Color | Primary theme color border |
| input-secondary | Color | Secondary theme color border |
| input-accent | Color | Accent theme color border |
| input-neutral | Color | Neutral theme color border |
| input-info | Color | Info semantic color border |
| input-success | Color | Success semantic color border |
| input-warning | Color | Warning semantic color border |
| input-error | Color | Error semantic color border |
Basic Usage
<input type="text" placeholder="Enter your text here" class="input"> |
<input type="text" placeholder="Enter your text here" className="input"> |
Input Sizes
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
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
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.
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
1 2 | <input type="text" class="input" placeholder="Enabled input"> <input type="text" class="input input-disabled" placeholder="Disabled input" disabled> |
Input with Label
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> |