---
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/vi/components/input
---

# Input Component

Các thành phần đầu vào thu thập dữ liệu người dùng thông qua các trường văn bản, email, mật khẩu và các loại đầu vào khác. Hệ thống đầu vào Frutjam cung cấp các điều khiển biểu mẫu HTML ngữ nghĩa với kiểu CSS Tailwind cho nhiều kích thước, màu sắc và trạng thái xác thực. Được thiết kế để hỗ trợ khả năng truy cập và hành vi phản hồi, đầu vào tích hợp liền mạch với các khung và thư viện xác thực biểu mẫu.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

| Lớp học         | Kiểu            | Sự miêu tả                                            |
| --------------- | --------------- | ----------------------------------------------------- |
| input           | Căn cứ          | Trường nhập văn bản được tạo kiểu                     |
| input-outline   | Phong cách      | Transparent fill with a visible border                |
| input-soft      | Phong cách      | Nền màu bị tắt tiếng                                  |
| input-ghost     | Phong cách      | Không có đường viền hiển thị cho đến khi được lấy nét |
| input-dashed    | Phong cách      | Kiểu đường viền nét đứt                               |
| input-square    | Phong cách      | Không có bán kính đường viền                          |
| input-disabled  | Công cụ sửa đổi | Disabled appearance for non-input elements            |
| input-xs        | Kích cỡ         | Cực nhỏ                                               |
| input-sm        | Kích cỡ         | Bé nhỏ                                                |
| input-md        | Kích cỡ         | Trung bình (mặc định)                                 |
| input-lg        | Kích cỡ         | Lớn                                                   |
| input-xl        | Kích cỡ         | Cực lớn                                               |
| input-2xl       | Kích cỡ         | 2× extra large                                        |
| input-primary   | Màu sắc         | Đường viền màu chủ đề chính                           |
| input-secondary | Màu sắc         | Đường viền màu chủ đề phụ                             |
| input-accent    | Màu sắc         | Đường viền màu chủ đề nổi bật                         |
| input-neutral   | Màu sắc         | Đường viền màu chủ đề trung tính                      |
| input-info      | Màu sắc         | Đường viền màu ngữ nghĩa thông tin                    |
| input-success   | Màu sắc         | Đường viền màu ngữ nghĩa thành công                   |
| input-warning   | Màu sắc         | Cảnh báo viền màu ngữ nghĩa                           |
| input-error     | Màu sắc         | Lỗi ngữ nghĩa viền màu                                |

## Cách sử dụng cơ bản

## Kích thước đầu vào

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

## Màu đầu vào

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

## Kiểu nhập

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

## Ô vuông đầu vào

Sử dụng `input-square` cho các đầu vào ký tự đơn có chiều rộng cố định như trường OTP hoặc 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">
```

## Đầu vào bị vô hiệu hóa

```html
<input type="text" class="input" placeholder="Enabled input">
<input type="text" class="input input-disabled" placeholder="Disabled input" disabled>
```

## Nhập bằng nhãn

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