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

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

NameTypeDefaultDescription
checkedbooleanTrạng thái của radio, sử dụng dạng controlled component
defaultCheckedbooleanTrạng thái khởi tạo của radio
disabledbooleanTrạng thái radio bị vô hiệu hoá
namestringTên của input radio
labelstringThêm label cho radio
valuestring | numberGiá trị của radio
sizeRadioSizemediumKích thước của radio
onChangefunctionThêm event handler khi trạng thái radio thay đôi

Radio.Group

NameTypeDefaultDescription
defaultValuestring | numberGiá trị mặc định của radio
disabledbooleanVô hiệu hoá các radio trong nhóm
namestringTên của input radio
sizeRadioSizemediumKích thước của radio
optionsArray[]Danh sách các radio cần render thay thế cho cách sử dụng các children là Radio component
onChangefunctionThêm event handler khi giá trị radio group thay đôi

Type

RadioSize

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

Example

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