Components
Checkbox
Dựng từ contract Checkbox/Mark, gồm 45 variant, properties Size × Type × State × Select.
Contract ghi rõ hai luật dễ đoán sai: viền chỉ có khi chưa tick, padding chỉ có khi đã tick.
- Color scheme
- Brand
- Density
- Radius
- Emphasis
- Type scale
API
Props
| Property | Values | Default | Description |
|---|---|---|---|
size | medium · small · large | medium | |
checked | boolean | false | Select property của contract |
indeterminate | boolean | false | Type property của contract |
disabled | boolean | false | |
label | text | Ghi nhớ đăng nhập | |
rowHovered | boolean | false | Dòng danh sách chứa ô tick đang được rê chuột |
state | default · hover-row · hover-mark · focused · disabled | default | Ép trạng thái, chỉ dùng khi chụp tài liệu |
Section 01
Default
Section 02
Checked
Section 03
Indeterminate
Section 04
Disabled
Section 05
Sizes
Size
medium
small
large
Section 06
Select × State
defaulthover-rowhover-markfocuseddisabledunchecked
checked
indeterminate
Trong contract, Hover-Row và Hover-Mark là hai trạng thái khác nhau. Hover-Row là rê chuột vào cả dòng danh sách, Hover-Mark là rê vào chính ô tick. CSS không tự phân biệt được, nên JS ghi trạng thái vào data-state.