Component / 003 / NEXOFRAME
Label
Mẫu chuẩnTên nhìn thấy được của một ô. Bấm vào nhãn thì tiêu điểm vào ô gắn với nó.
Playground
Đổi brand. Nhãn không có trạng thái riêng. Disabled thuộc ô đi kèm.
import { Input, Label } from "@nexobox/ui";
<Label htmlFor="name">Tên</Label>
<Input id="name" />Khi nào sử dụng
Nên dùng
Tên nhìn thấy được của một ô hoặc một nhóm điều khiển. Gắn htmlFor với id của ô.
Tránh dùng
Tiêu đề section, câu trợ giúp, trạng thái. Nhãn nút là children của Button.
Anatomy
Một gốc Label. Chữ là children. htmlFor là tuỳ chọn, và là cách gắn nhãn với ô.
States
DEFAULT
Màu chữ chính. Không phải điểm dừng Tab.
Ô DISABLED
Disabled là trạng thái của ô, không phải của Label.
Không có variant, không có size, không có trạng thái hover hay focus của riêng nhãn.
Design tokens
Chữ lấy --nf-semantic-text-primary và --nf-foundation-typography-ui-*. Không hex mới.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| htmlFor | — | Id của ô được đặt tên. Bấm nhãn thì tiêu điểm vào ô đó. |
| children | — | Tên nhìn thấy được. Không dùng placeholder thay cho nhãn. |
Accessibility & nội dung
Không phải điểm dừng Tab.
Bấm nhãn đưa tiêu điểm vào ô gắn htmlFor.
Không dùng làm tiêu đề hay câu trợ giúp.