Input Component
CSS-only Tailwind CSS input with primary, secondary, accent, and semantic color variants. Sizes xs–xl, prefix and suffix addon slots, ghost style. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
輸入元件透過文字欄位、電子郵件、密碼和其他輸入類型擷取使用者資料。 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"> |
輸入方塊
使用 input-square 進行固定寬度的單字元輸入，例如 OTP 或 PIN 欄位。
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> |