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	false	Trạng thái đánh dấu của checkbox. Cần được sử dụng cùng với onChange để cập nhật lại giá trị.
defaultChecked	boolean	false	Trạng thái mặc định của checkbox. Lưu ý: Thay đổi defaultChecked khi checkbox đã được render sẽ không có tác dụng.
disabled	boolean	false	Vô hiệu hóa checkbox.
indeterminate	boolean	false	Nếu bật, checkbox sẽ có thêm trạng thái không xác định. Trạng thái không xác định là trạng thái trung gian giữa checked và unchecked.
label	string		Nhãn của checkbox, được hiển thị phía sau checkbox. Nếu cần hiển thị ReactNode, sử dụng children thay vì label.
name	string		Tên của checkbox. Được sử dụng để gom nhóm các checkbox lại với nhau. Các checkbox có cùng name sẽ được xem là một nhóm.
size	'medium' | 'small'		Độ lớn của checkbox.
value	string | number		Giá trị của checkbox. Khác với checked là trạng thái đánh dấu của checkbox, value được dùng để xác định giá trị của CheckboxGroup khi các checkbox bên trong nó được chọn. Nếu checkbox được chọn, giá trị của nó sẽ được thêm vào mảng value của CheckboxGroup, ngược lại sẽ được xóa khỏi mảng.
onChange	Function		Callback được gọi khi trạng thái của checkbox thay đổi. Cần phải cập nhật lại giá trị của checked nếu được truyền vào.

Checkbox.Group

Name	Type	Default	Description
defaultValue	(string | number)[]		Giá trị mặc định của checkbox group. Các checkbox bên trong group có thuộc tính value nằm trong mảng này sẽ được chọn sẵn. Lưu ý: Thay đổi defaultValue khi checkbox group đã được render sẽ không có tác dụng.
disabled	boolean		Vô hiệu hóa checkbox group.
name	string		Tên của checkbox group. Được sử dụng để gom nhóm các checkbox lại với nhau. Các checkbox có cùng name sẽ được xem là một nhóm.
options	CheckboxProps[]		Thay vì render các <Checkbox> bên trong <Checkbox.Group>, có thể sử dụng options để quản lý các lựa chọn của group này. Tất cả các thuộc tính của CheckboxProps đều có thể được sử dụng trong options.
size	'medium' | 'small'		Độ lớn của các checkbox trong group.
value	(string | number)[]		Giá trị của checkbox group. Các checkbox bên trong group có thuộc tính value nằm trong mảng này sẽ được chọn. Cần được sử dụng cùng với onChange để cập nhật lại giá trị.
onChange	(checkedValue: (string | number)[]) => void		Callback được gọi khi trạng thái của checkbox group thay đổi. Cần phải cập nhật lại giá trị của value nếu được truyền vào.

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>
  );
}