Input
Mẫu chuẩnÔ nhập một dòng. Nhãn đặt tên cho ô; placeholder chỉ là gợi ý, không thay cho nhãn.
Playground
Đổi brand, kiểu, size và trạng thái. Size md theo mật độ của trang; sm và lg giữ chiều cao của Button.
Nhập rồi nhấn Enter để gửi mẫu.
import { Input, Label } from "@nexobox/ui";
<Label htmlFor="name">Tên</Label>
<Input
id="name"
type="text"
placeholder="Tên khách hàng"
/>Khi nào sử dụng
Nên dùng
Một dòng chữ tự do: tên, email, số, tìm trong form. Luôn đi với Label.
Tránh dùng
Danh sách đã biết thì dùng Select. Nhiều dòng thì không phải primitive này. Không dùng để điều hướng hay chỉ để kích hoạt.
Anatomy
Padding ngang 12 px. Chữ đọc --nf-component-field-font-size: 16 px dưới 640 px, chữ ui từ đó trở lên. Chiều cao 40 px ở comfortable, 36 px ở compact; con trỏ thô đọc sàn 44 px qua vùng chạm, không qua chiều cao — DS-017 clause 6.
States
Nền, chữ, bóng nhẹ và viền control đủ nhận diện.
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. Ô nhập 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. Đây là ngoại lệ hai lớp A35 chỉ dành cho ô nhập.
Màu disabled của button. Không hover.
Màu placeholder. Nhãn vẫn là tên.
Viền lỗi và ring 20% khi aria-invalid hoặc :user-invalid.
Không có variant và không có prop error. Form cha giữ câu báo lỗi.
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-*. Viền lúc nghỉ là --nf-component-field-border, resolve về --nf-semantic-border-control. Bóng là --nf-component-field-shadow. :focus đổi viền sang --nf-component-focus-color. :focus-visible thêm vòng --nf-component-focus-width ở 50% màu đó, sát mép, cùng bóng field. Thời lượng --nf-component-transition-duration.
API & triển khai
| Prop | Mặc định | Quy ước |
|---|---|---|
| type | text | text, email, password, search, tel, url, number. |
| 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. |