Radio
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
import React from "react";
import { Page, Text, Box, Radio } from "zmp-ui";
export default function HomePage(props) {
return (
<Text.Title size="small">Radio Button</Text.Title>
<Box mt={4}>
<Text bold className="section-page-title">
Medium Size
</Text>
</Box>
<Box mt={6}>
</Box>
<Box mt={6}>
</Box>
<Box mt={6}>
</Box>
<Box mt={6}>
</Box>
<Box mt={4}>
<Text bold className="section-page-title">
Small Size
</Text>
</Box>
<Box mt={6}>
</Box>
<Box mt={6}>
</Box>
<Box mt={6}>
</Box>
<Box mt={6}>
</Box>
);
}