Components
Input
Dựng từ contract Input/Text-Field, gồm 36 variant, properties Size × State.
Không phải State nào trong 9 State của Figma cũng là pseudo-class CSS. Có State thuộc tương tác (Hover, Focused), nội dung (Typing, Inputted), thuộc tính (Read-Only, Disabled) hoặc lỗi (Inputted-Error, Blank-Error). Vì thế, trạng thái ghi bằng data-state.
- Color scheme
- Brand
- Density
- Radius
- Emphasis
- Type scale
API
Props
| Property | Values | Default | Description |
|---|---|---|---|
size | medium · large · xlarge · small | medium | |
label | text | Số tài khoản | |
optional | boolean | false | Thêm chữ "(không bắt buộc)" cạnh nhãn |
placeholder | text | Nhập số tài khoản | |
value | text | ||
helpText | text | Tối đa 20 ký tự | |
error | boolean | false | |
readOnly | boolean | false | |
disabled | boolean | false | |
clearable | boolean | true | Nút Clear chỉ hiện ở State Typing / Inputted / Inputted-Error, theo contract |
leadingIcon | 26 icon names, see Iconography | ||
trailingIcon | 26 icon names, see Iconography | ||
state | 9 icon names, see Iconography | default | Ép trạng thái, chỉ dùng khi chụp tài liệu |
Section 01
Default
Section 02
Inputted
Section 03
Inputted-Error
Section 04
Blank-Error
Section 05
Read-Only
Section 06
Disabled
Section 07
With Icons
Section 08
Sizes
Size
Section 09
All States (9)
Nút Clear chỉ hiện ở Typing / Inputted / Inputted-Error. Ở hai state lỗi, icon đổi từ info sang cảnh báo. Code trong input.js đọc hai điều kiện này từ contract bằng partExists(), không gõ tay.