Field
Field gói một control nhập liệu cùng nhãn, dấu bắt buộc, gợi ý và thông báo kiểm tra.
Field tự sinh id, nối label với control và gắn aria-describedby / aria-invalid. Truyền một element (Textarea, Select…) hoặc render-prop (props) => <Control {...props} /> cho control không nhận id trực tiếp.
Tối đa 200 ký tự.
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 { Field } 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.
Tên miền đã có người dùng.
Mật khẩu mạnh.
Validation
validationState error / warning / success kèm validationMessage có icon.
Ngang (horizontal)
Nhãn bên trái, control bên phải — dùng cho form cài đặt rộng.
Có thể đổi bất cứ lúc nào.
Render-prop
Cho control cần nhận props theo cách riêng (RadioGroup, component tự viết…).
Cách dùng
Nên
- Mỗi control nhập liệu đều nằm trong Field (hoặc có label riêng).
- validationMessage nêu rõ cách sửa lỗi.
Không nên
- Không dùng placeholder thay cho label.
- Không lồng Field trong Field.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| labelReactNode | Mặc định: — | Nhãn, tự nối với control qua htmlFor. |
| requiredboolean | Mặc định: — | Hiện dấu * đỏ và truyền required xuống control. |
| hintReactNode | Mặc định: — | Gợi ý bên dưới. |
| validationState"none" | "error" | "warning" | "success" | Mặc định: "none" | Trạng thái kiểm tra. |
| validationMessageReactNode | Mặc định: — | Thông điệp kèm icon trạng thái. |
| orientation"vertical" | "horizontal" | Mặc định: "vertical" | Bố cục nhãn. |
| size"small" | "medium" | "large" | Mặc định: "medium" | Cỡ nhãn. |
| childrenReactElement | (props) => ReactNode | Mặc định: — | Control hoặc render-prop nhận id/aria-*. |