Checkbox

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, Checkbox } from "zmp-ui";

function HomePage(props){
    return (
        <Page>
            <Box>
                <Checkbox label="Label" />
            </Box>
            <Box>
                <Checkbox defaultChecked label="Label" />
            </Box>
            <Box>
                <Checkbox disabled label="Label" />
            </Box>
            <Box>
                <Checkbox defaultChecked disabled label="Label" />
            </Box>
        </Page>
    );
}

import React from "react";
import { Page, Radio } from "zmp-ui";

function HomePage(props){
    return (
       <Page>
            <Checkbox.Group
                onChange={val => {
                    console.log(val);
                }}
                name="fruit"
                defaultValue="apple"
                options={[
                    { label: "Orange", value: "orange", disabled: true },
                    { label: "apple", value: "apple" },
                    { label: "Banana", value: "banana" },
                ]}
            />
       </Page>
    );
}