Input
Input cho phép người dùng nhập và chỉnh sửa văn bản trên một dòng.
Input đã tích hợp sẵn Field: label, dấu bắt buộc, hint và validation message. Khi focus, thanh brand chạy ra từ giữa đáy — đặc trưng của Fluent 2.
Chúng tôi sẽ gửi liên kết xác minh đến email này.
Import
Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.
TSX
// npm install yugen-uiimport { Input } from "yugen-ui";Biến thể
Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.
Appearance
outline (mặc định), underline, filled-darker, filled-lighter.
Mật khẩu cần ít nhất 8 ký tự.
Tên này khả dụng.
Validation
validationState + validationMessage. Lỗi luôn phải nói rõ cách sửa.
@congty.vn
Content before / after
Icon hoặc đơn vị đặt trong ô nhập.
Kích thước & disabled
small (24px), medium (32px), large (40px).
Cách dùng
Nên
- Luôn có label hiển thị.
- Dùng hint cho định dạng mong đợi (vd: DD/MM/YYYY).
- Đánh dấu trường bắt buộc bằng required.
Không nên
- Không dùng placeholder thay cho label.
- Không báo lỗi chung chung như “Không hợp lệ”.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| labelReactNode | Mặc định: — | Nhãn liên kết với input qua htmlFor. |
| appearance"outline" | "underline" | "filled-darker" | "filled-lighter" | "glass" | Mặc định: "outline" | Kiểu ô nhập. glass (Yugen Labs): ô nhập bo tròn trong thanh glass. |
| size"small" | "medium" | "large" | Mặc định: "medium" | Chiều cao 24 / 32 / 40px. |
| validationState"none" | "error" | "warning" | "success" | Mặc định: "none" | Trạng thái kiểm tra. |
| validationMessageReactNode | Mặc định: — | Thông điệp đi kèm validationState. |
| hintReactNode | Mặc định: — | Gợi ý bên dưới ô nhập. |
| contentBefore / contentAfterReactNode | Mặc định: — | Nội dung trong ô, trước/sau text. |
| rootClassNamestring | Mặc định: — | Class cho khối Field bao ngoài (đặt width ở đây). |