Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

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.

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ả
inputCăn cứTrường nhập văn bản được tạo kiểu
input-outlinePhong cáchTransparent fill with a visible border
input-softPhong cáchNền màu bị tắt tiếng
input-ghostPhong cáchKhông có đường viền hiển thị cho đến khi được lấy nét
input-dashedPhong cáchKiểu đường viền nét đứt
input-squarePhong cáchKhông có bán kính đường viền
input-disabledCông cụ sửa đổiDisabled appearance for non-input elements
input-xsKích cỡCực nhỏ
input-smKích cỡBé nhỏ
input-mdKích cỡTrung bình (mặc định)
input-lgKích cỡLớn
input-xlKích cỡCực lớn
input-2xlKích cỡ2× extra large
input-primaryMàu sắcĐường viền màu chủ đề chính
input-secondaryMàu sắcĐường viền màu chủ đề phụ
input-accentMàu sắcĐường viền màu chủ đề nổi bật
input-neutralMàu sắcĐường viền màu chủ đề trung tính
input-infoMàu sắcĐường viền màu ngữ nghĩa thông tin
input-successMàu sắcĐường viền màu ngữ nghĩa thành công
input-warningMàu sắcCảnh báo viền màu ngữ nghĩa
input-errorMàu sắcLỗi ngữ nghĩa viền màu

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

<input type="text" placeholder="Enter your text here" class="input">

<input type="text" placeholder="Enter your text here" className="input">

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

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

Màu đầu vào

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

Kiểu nhập

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

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

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

html 
1
2
<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 
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>