輸入組件
最後更新:
僅 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"> |
輸入方塊
使用 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> |