---
title: "Input"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Input with native HTML semantics. Labels, error states, icons, prefix/suffix, and multiple sizes for accessible, theme-aware form fields."
url: https://frutjam.com/zh-hant/components/input
---

# Input Component

輸入元件透過文字欄位、電子郵件、密碼和其他輸入類型擷取使用者資料。 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     | 顏色  | 錯誤語意顏色邊框    |

## 基本用法

## 輸入尺寸

```html
<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
<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
<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
<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
<input type="text" class="input" placeholder="Enabled input">
<input type="text" class="input input-disabled" placeholder="Disabled input" disabled>
```

## 帶標籤輸入

```html
<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>
```