Textarea
Textarea cho phép nhập và chỉnh sửa văn bản dài trên nhiều dòng.
Có cùng ngôn ngữ thị giác với Input: viền đáy stroke-accessible và thanh brand chạy từ giữa khi focus. Đặt trong Field để có label, hint và validation; chọn resize để người dùng tự kéo giãn.
Nêu các bước để tái hiện lỗi.
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 { Textarea, 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.
Appearance
outline (mặc định), filled-darker, filled-lighter — filled dùng trên nền có màu tương phản.
Kích thước
small, medium, large — đổi cỡ chữ, padding và chiều cao tối thiểu.
Resize
none (mặc định), vertical, horizontal, both.
Ghi chú không được để trống.
Validation & disabled
Field tự truyền aria-invalid / disabled xuống Textarea.
Cách dùng
Nên
- Dùng cho nội dung có thể dài hơn một dòng (mô tả, phản hồi, ghi chú).
- Cho phép resize vertical khi độ dài nội dung khó đoán.
- Nêu giới hạn ký tự trong hint nếu có.
Không nên
- Không dùng Textarea cho dữ liệu một dòng như tên, email — dùng Input.
- Không để Textarea quá thấp khiến người dùng phải cuộn ngay từ đầu.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| appearance"outline" | "filled-darker" | "filled-lighter" | Mặc định: "outline" | Kiểu ô nhập. |
| size"small" | "medium" | "large" | Mặc định: "medium" | Cỡ chữ, padding, chiều cao tối thiểu 40 / 52 / 64px. |
| resize"none" | "vertical" | "horizontal" | "both" | Mặc định: "none" | Hướng cho phép kéo giãn. |
| classNamestring | Mặc định: — | Class cho khung ngoài (đặt width). |
| textareaClassNamestring | Mặc định: — | Class cho chính thẻ textarea. |
| value, onChange, rows…TextareaHTMLAttributes | Mặc định: — | Thuộc tính gốc của textarea. |