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

Name	Type	Default	Description
checked	boolean	false	Trạng thái được chọn của radio. Cần được sử dụng cùng với onChange để thay đổi giá trị khi người dùng thao tác.
children	React.ReactNode		Được sử dụng thay cho label khi cần hiển thị nội dung phức tạp hơn. Được render bên phải radio.
defaultChecked	boolean	false	Trạng thái đánh dấu mặc định của radio.
disabled	boolean	false	Trạng thái vô hiệu hoá của radio.
label	string		Nhãn của radio, được hiển thị bên cạnh radio. Nếu cần hiển thị ReactNode, sử dụng children.
name	string		Tên định danh của radio. Được sử dụng để nhóm các radio lại với nhau trong Radio.Group.
size	'medium' | 'small'	'medium'	Độ lớn của radio.
value	RadioValueType		Giá trị của radio, được sử dụng để nhận biết radio nào được chọn trong Radio.Group.
onChange	(event: ChangeEvent) => void		Callback được gọi khi giá trị của radio thay đổi. Nếu checked được sử dụng, cần phải cập nhật lại giá trị của checked trong callback này.

Radio.Group

Name	Type	Default	Description
children	React.ReactNode		Dùng để render các <Radio> trong group cũng như các phần tử khác. Không sử dụng cùng với options.
defaultValue	RadioValueType		Radio với value khớp với giá trị này sẽ được chọn sẵn. Thay đổi giá trị này sau khi render sẽ không có tác dụng.
disabled	boolean	false	Trạng thái vô hiệu hoá của radio group, cũng như các radio con bên trong.
name	string		Tên định danh của radio group. Được sử dụng để nhóm các radio lại với nhau.
options	RadioProps[]		Mảng các thiết lập để tạo ra các radio trong group. Nếu cần hiển thêm khác phần tử khác radio, sử dụng children thay vì options.
size	'medium' | 'small'	'medium'	Độ lớn của radio group.
value	RadioValueType		Giá trị hiện tại của radio group. Cụ thể hơn là thuộc tính value của Radio đang được chọn trong nhóm các Radio có cùng name. Cần được sử dụng cùng với onChange để thay đổi giá trị khi người dùng thao tác.
onChange	(value: RadioValueType) => void		Callback được gọi khi giá trị của radio group thay đổi. Cụ thể hơn là khi có một radio trong group được chọn hoặc thay thế radio đang được chọn trước đó. Nếu value được sử dụng, cần phải cập nhật lại giá trị của value trong callback này.

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