입력 구성 요소
기본, 보조, 악센트 및 의미 색상 변형이 포함된 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-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.
| Class | 타입 | 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
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> |