Radio

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, Box, Radio } from "zmp-ui";

function HomePage(props){
    return (
        <Page>
            <Box>
                <Radio name="medium-1" value={1} label="Label" />
            </Box>
            <Box>
                <Radio
                    name="medium-2"
                    defaultChecked
                    value={2}
                    label="Label"
                />
            </Box>
            <Box>
                <Radio name="medium-3" disabled value={3} label="Label" />
            </Box>
            <Box>
                <Radio
                    name="medium-4"
                    defaultChecked
                    disabled
                    value={4}
                    label="Label"
                />
            </Box>
        </Page>
    );
}

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

function HomePage(props){
    return (
       <Page>
            <Radio.Group
                onChange={val => {
                    console.log(val);
                }}
                name="fruit"
                defaultValue="apple"
                options={[
                    { label: "Orange", value: "orange", disabled: true },
                    { label: "apple", value: "apple" },
                    { label: "Banana", value: "banana" },
                ]}
            />
       </Page>
    );
}

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

function HomePage(props){
    return (
       <Page>
        <Radio.Group name="fruit" defaultValue={"apple"}>
            <Box>
                <Radio value="apple">Apple</Radio>
            </Box>
            <Box>
                <Radio value="banana">Banana</Radio>
            </Box>
            <Box>
                <Radio value="orange">Orange</Radio>
            </Box>
        </Radio.Group>
       </Page>
    );
}