Checkbox

Cập nhật lần cuối: 27/05/2022

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

Open Sandbox

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

export default function HomePage(props) {
  return (
    <Page className="section-container">
      <Text.Title size="small">Checkbox</Text.Title>
      <Box mt={4}>
        <Text bold className="section-page-title">
          Medium Size
        </Text>
      </Box>
      <Box mt={6}>
        <Checkbox label="Label" />
      </Box>
      <Box mt={6}>
        <Checkbox defaultChecked label="Label" />
      </Box>
      <Box mt={6}>
        <Checkbox disabled label="Label" />
      </Box>
      <Box mt={6}>
        <Checkbox defaultChecked disabled label="Label" />
      </Box>
      <Box mt={6}>
        <Text bold className="section-page-title">
          Small Size
        </Text>
      </Box>

      <Box mt={6}>
        <Checkbox size="small" label="Label" />
      </Box>
      <Box mt={6}>
        <Checkbox size="small" defaultChecked label="Label" />
      </Box>
      <Box mt={6}>
        <Checkbox size="small" disabled label="Label" />
      </Box>
      <Box mt={6}>
        <Checkbox size="small" defaultChecked disabled label="Label" />
      </Box>
    </Page>
  );
}