Textarea
Mẫu chuẩnÔ nhập nhiều dòng. Chiều cao đến từ rows và min-height, không có prop size.
Playground
Đổi brand, theme, trạng thái và số dòng. Kéo cạnh dưới để giãn cao thêm — không kéo được theo chiều ngang.
Enter chèn xuống dòng, không submit form. Kéo cạnh dưới để giãn cao.
import { Textarea, Label } from "@nexobox/ui";
<Label htmlFor="note">Ghi chú</Label>
<Textarea id="note" rows={5} placeholder="Nhập ghi chú cho đơn hàng"
/>Khi nào sử dụng
Nên dùng
Văn bản tự do nhiều dòng: ghi chú, mô tả, lý do huỷ, nội dung tin nhắn dài. Luôn đi với Label. rows do người gọi truyền để định chiều cao ban đầu; kéo dọc cho phép giãn thêm khi cần.
Tránh dùng
Một dòng chữ tự do thì dùng Input. Một hành động thì dùng Button.
Anatomy
Padding ngang theo --nf-component-field-padding-inline, padding dọc 8 px (--nf-foundation-space-2). Chữ UI tối thiểu 16 px. min-height hiện tại là 80 px (mật độ comfortable; compact hạ còn 72 px) vì công thức là calc(var(--nf-component-field-height)*2) — không có nhánh JS riêng cho Textarea.
Variants & states
Không có variant. Không có size — đây là luật của component này, không phải thiếu sót. Chiều cao đến từ rows và min-height tự theo density.
Nền, chữ và viền của field.
Nền surface-hover. Viền giữ nguyên.
:focus đổi viền — đúng kể cả khi vào bằng chuột. Không có ring, và không có pressed: gõ không phải nhấn.
:focus-visible vẽ thêm ring trên cùng viền — chỉ khi điều hướng bàn phím. Ngoại lệ hai lớp A35 chỉ dành cho ô nhập.
Màu disabled của button. Không hover.
Viền lỗi khi aria-invalid hoặc :user-invalid.
Loading, empty: không có. Textarea không bất đồng bộ. Không có variant và không có prop error.
Design tokens
Giá trị theo NexoCrew / light. Ô đọc --nf-component-field-*. Hover dùng --nf-semantic-surface-hover. Disabled dùng --nf-component-button-disabled-*. min-height là calc(var(--nf-component-field-height)*2) — chỗ duy nhất density chạm vào component này. Viền :focus và ring :focus-visible là bóng sát mép, 50% --nf-component-focus-color, dày --nf-component-focus-width — cùng Input, không phải outline lệch của nút. Cỡ chữ đọc --nf-component-field-font-size.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| rows | — (mặc định của trình duyệt) | Thuộc tính native, người gọi truyền. Wrapper không đặt mặc định. |
| disabled | false | Thuộc tính native. Không nhận hover hay active. |
| placeholder | — | Gợi ý. Không dùng thay Label. |
| aria-invalid | — | Không có prop error. Form cha viết câu báo và nối aria-describedby. |
TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> — mọi thuộc tính textarea gốc đều nhận, kể cả value, defaultValue, onChange, maxLength, name, required.