Checkbox
Cho phép người dùng chọn một hoặc nhiều mục trong một nhóm các lựa chọn
Properties
Checkbox
| Name | Type | Default | Description |
|---|---|---|---|
| checked | boolean | Trạng thái của checkbox | |
| defaultChecked | boolean | Trạng thái mặc định của checkbox | |
| disabled | boolean | Disable checkbox | |
| name | string | Tên của checkbox | |
| label | string | Nhãn của checkbox. Sẽ được hiển thị phía sau tick icon | |
| value | string | number | Giá trị của checkbox | |
| size | CheckBoxSize | Kích thước checkbox | |
| indeterminate | boolean | Nếu bật, checkbox sẽ có thêm trạng thái không xác định | |
| onChange | function | Thêm event handler khi trạng thái checkbox thay đôi |
Checkbox.Group
| Name | Type | Default | Description |
|---|---|---|---|
| defaultValue | Array | Giá trị mặc định của group | |
| options | Array | Mảng các checkbox sẽ hiển thị trong group |
Type
CheckBoxSize
| Name | Description |
|---|---|
| "medium" | Size medium |
| "small" | Size small |
Example
import React from "react";
import { Page, Box, Text, Radio, Checkbox } from "zmp-ui";
export default function HomePage(props) {
return (
<Text.Title size="small">Checkbox</Text.Title>
<Box mt={4}>
<Text bold className="section-page-title">
Medium Size
</Text>
</Box>
<Box mt={6}>
</Box>
<Box mt={6}>
</Box>
<Box mt={6}>
</Box>
<Box mt={6}>
</Box>
<Box mt={6}>
<Text bold className="section-page-title">
Small Size
</Text>
</Box>
<Box mt={6}>
</Box>
<Box mt={6}>
</Box>
<Box mt={6}>
</Box>
<Box mt={6}>
</Box>
);
}