Nhảy tới nội dung
Phiên bản: 1.8.0

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

NameTypeDefaultDescription
checkedbooleanTrạng thái của checkbox
defaultCheckedbooleanTrạng thái mặc định của checkbox
disabledbooleanDisable checkbox
namestringTên của checkbox
labelstringNhãn của checkbox. Sẽ được hiển thị phía sau tick icon
valuestring | numberGiá trị của checkbox
sizeCheckBoxSizeKích thước checkbox
indeterminatebooleanNếu bật, checkbox sẽ có thêm trạng thái không xác định
onChangefunctionThêm event handler khi trạng thái checkbox thay đôi

Checkbox.Group

NameTypeDefaultDescription
defaultValueArrayGiá trị mặc định của group
optionsArrayMảng các checkbox sẽ hiển thị trong group

Type

CheckBoxSize

NameDescription
"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 (
    <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>
  );
}