Radio

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

Tạo giao diện cho phép người dùng chọn một mục duy nhất trong nhóm các lựa chọn

Properties

Radio

Name	Type	Default	Description
checked	boolean		Trạng thái của radio, sử dụng dạng controlled component
defaultChecked	boolean		Trạng thái khởi tạo của radio
disabled	boolean		Trạng thái radio bị vô hiệu hoá
name	string		Tên của input radio
label	string		Thêm label cho radio
value	string | number		Giá trị của radio
size	RadioSize	medium	Kích thước của radio
onChange	function		Thêm event handler khi trạng thái radio thay đôi

Radio.Group

Name	Type	Default	Description
defaultValue	string | number		Giá trị mặc định của radio
disabled	boolean		Vô hiệu hoá các radio trong nhóm
name	string		Tên của input radio
size	RadioSize	medium	Kích thước của radio
options	Array	[]	Danh sách các radio cần render thay thế cho cách sử dụng các children là Radio component
onChange	function		Thêm event handler khi giá trị radio group thay đôi

Type

RadioSize

Name	Description
"medium"	Kích thước medium - mặc định
"small"	Kích thước small

Example

Open Sandbox

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

export default function HomePage(props) {
  return (
    <Page className="section-container">
      <Text.Title size="small">Radio Button</Text.Title>
      <Box mt={4}>
        <Text bold className="section-page-title">
          Medium Size
        </Text>
      </Box>
      <Box mt={6}>
        <Radio name="medium-1" value={1} label="Label" />
      </Box>
      <Box mt={6}>
        <Radio name="medium-2" defaultChecked value={2} label="Label" />
      </Box>
      <Box mt={6}>
        <Radio name="medium-3" disabled value={3} label="Label" />
      </Box>
      <Box mt={6}>
        <Radio
          name="medium-4"
          defaultChecked
          disabled
          value={4}
          label="Label"
        />
      </Box>

      <Box mt={4}>
        <Text bold className="section-page-title">
          Small Size
        </Text>
      </Box>

      <Box mt={6}>
        <Radio value={1} size="small" name="small-1" label="Label" />
      </Box>
      <Box mt={6}>
        <Radio
          size="small"
          value={2}
          name="small-2"
          defaultChecked
          label="Label"
        />
      </Box>
      <Box mt={6}>
        <Radio value={3} size="small" name="small-3" disabled label="Label" />
      </Box>
      <Box mt={6}>
        <Radio value={4} size="small" name="small-4" disabled label="Label" />
      </Box>
    </Page>
  );
}