Radio

When to use

Used to select a single state among multiple options.
The difference from Select is that all available options in Radio are visible by default, making it easier for users to choose in comparison, so there should not be too many options.

Demos

How to import

import { Radio, RadioGroup } from '@fibrous/semi-ui-react';

Basic Usage

Radio

Code

import { Radio } from '@fibrous/semi-ui-react';

export default function RadioDemo() {
    return (
        <Radio aria-label="单选示例" name="demo-radio">
            Radio
        </Radio>
    );
}

Extra Info

You can use extra to add extra information, which can be any type of ReactNode.

Semi Design

Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统

Code

import { Radio } from '@fibrous/semi-ui-react';

export default function RadioDemo() {
    return (
        <Radio extra="Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统" aria-label="单选示例" name="demo-radio-extra">
            Semi Design
        </Radio>
    );
}

Disabled

Code

import { useState } from 'react';
import { Radio, Button } from '@fibrous/semi-ui-react';

export default function RadioDemo() {
    const [disabled, setDisabled] = useState(true);
    const toggleDisabled = () => {
        setDisabled(!disabled);
    };
    return (
        <div>
            <Radio defaultChecked={false} disabled={disabled} aria-label="单选示例" name="demo-radio-disabled">
                Disabled
            </Radio>
            <br />
            <Radio defaultChecked disabled={disabled} aria-label="单选示例" name="demo-radio-defaultChecked-disabled">
                Disabled
            </Radio>
            <div style={{ marginTop: 20 }}>
                <Button type="primary" onClick={toggleDisabled}>
                    Toggle disabled
                </Button>
            </div>
        </div>
    );
}

Advanced Mode

You can set mode='advanced' to allow options be able to unchecked when clicked again.

允许取消选择

Code

import { useState } from 'react';
import { Radio, type RadioChangeEvent } from '@fibrous/semi-ui-react';

export default function RadioDemo() {
    const [checked, setChecked] = useState(true);
    const toggle = (e: RadioChangeEvent) => {
        console.log('radio checked', e.target.checked);
        setChecked(e.target.checked);
    };
    return (
        <Radio checked={checked} mode="advanced" onChange={toggle} aria-label="单选示例" name="demo-radio-advanced">
            允许取消选择
        </Radio>
    );
}

Mutually Exclusive Set

You can use RadioGroup to create a set of mutually exclusive options.

Code

import { useState } from 'react';
import { RadioGroup, Radio, type RadioChangeEvent } from '@fibrous/semi-ui-react';

export default function RadioDemo() {
    const [value, setValue] = useState(1);
    const onChange = (e: RadioChangeEvent) => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };
    return (
        <RadioGroup onChange={onChange} value={value} aria-label="单选组合示例" name="demo-radio-group">
            <Radio value={1}>A</Radio>
            <Radio value={2}>B</Radio>
            <Radio value={3}>C</Radio>
            <Radio value={4}>D</Radio>
        </RadioGroup>
    );
}

vertical arrangement

The radio elements in the group can be arranged horizontally or vertically by setting the direction property to the RadioGroup

Code

import { RadioGroup, Radio } from '@fibrous/semi-ui-react';

export default function RadioDemo() {
    return (
        <RadioGroup direction="vertical" aria-label="单选组合示例" name="demo-radio-group-vertical">
            <Radio value={1}>A</Radio>
            <Radio value={2}>B</Radio>
            <Radio value={3}>C</Radio>
            <Radio value={4}>D</Radio>
        </RadioGroup>
    );
}

Button Style

You can use type='button' to set the button style type radio, and the button type radio supports three sizes.

It should be noted that the button type radio selector does not support auxiliary text (extra) and vertical arrangement (direction='vertical').

Code

import { RadioGroup, Radio, Space } from '@fibrous/semi-ui-react';

export default function RadioDemo() {
    return (
        <Space vertical spacing="loose" align="start">
            <RadioGroup type="button" buttonSize="small" defaultValue={1} aria-label="单选组合示例" name="demo-radio-small">
                <Radio value={1}>即时推送</Radio>
                <Radio value={2}>定时推送</Radio>
                <Radio value={3}>动态推送</Radio>
            </RadioGroup>
            <RadioGroup type="button" buttonSize="middle" defaultValue={1} aria-label="单选组合示例" name="demo-radio-middle">
                <Radio value={1}>即时推送</Radio>
                <Radio value={2}>定时推送</Radio>
                <Radio value={3}>动态推送</Radio>
            </RadioGroup>
            <RadioGroup type="button" buttonSize="large" defaultValue={1} aria-label="单选组合示例" name="demo-radio-large">
                <Radio value={1}>即时推送</Radio>
                <Radio value={2}>定时推送</Radio>
                <Radio value={3}>动态推送</Radio>
            </RadioGroup>
        </Space>
    );
}

Card Style

You can set type='card' to RadioGroup to achieve card style with background.

单选框标题

Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统

单选框标题

Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统

单选框标题

Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统

Code

import { RadioGroup, Radio } from '@fibrous/semi-ui-react';

export default function RadioDemo() {
    return (
        <RadioGroup type="card" defaultValue={2} direction="vertical" aria-label="单选组合示例" name="demo-radio-group-card">
            <Radio value={1} disabled extra="Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统" style={{ width: 280 }}>
                单选框标题
            </Radio>
            <Radio value={2} extra="Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统" style={{ width: 280 }}>
                单选框标题
            </Radio>
            <Radio value={3} extra="Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统" style={{ width: 280 }}>
                单选框标题
            </Radio>
        </RadioGroup>
    );
}

Pure Card Style

You can set type='pureCard' to RadioGroup to achieve a pure card style with background and no radio.

单选框标题

Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统

单选框标题

Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统

单选框标题

Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统

Code

import { RadioGroup, Radio } from '@fibrous/semi-ui-react';

export default function RadioDemo() {
    return (
        <RadioGroup type="pureCard" defaultValue={2} direction="vertical" aria-label="单选组合示例" name="demo-radio-group-pureCard">
            <Radio value={1} disabled extra="Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统" style={{ width: 280 }}>
                单选框标题
            </Radio>
            <Radio value={2} extra="Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统" style={{ width: 280 }}>
                单选框标题
            </Radio>
            <Radio value={3} extra="Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统" style={{ width: 280 }}>
                单选框标题
            </Radio>
        </RadioGroup>
    );
}

Options Configuration

You can pass an array of options to RadioGroup using options property to create a set.

Code

import { useState } from 'react';
import { RadioGroup, Space, type RadioChangeEvent } from '@fibrous/semi-ui-react';

export default function RadioDemo() {
    const [value1, setValue1] = useState('Guest');
    const [value2, setValue2] = useState('Developer');
    const [value3, setValue3] = useState('Maintainer');
    const plainOptions = ['Guest', 'Developer', 'Maintainer'];
    const options = [
        { label: 'Guest', value: 'Guest', extra: 'Semi Design', style: { width: 120 } },
        { label: 'Developer', value: 'Developer', extra: 'Semi Design', style: { width: 120 } },
        { label: 'Maintainer', value: 'Maintainer', extra: 'Semi Design', style: { width: 120 } },
    ];
    const optionsWithDisabled = [
        { label: 'Guest', value: 'Guest' },
        { label: 'Developer', value: 'Developer' },
        { label: 'Maintainer', value: 'Maintainer', disabled: true },
    ];

    const onChange1 = (e: RadioChangeEvent) => {
        console.log('radio1 checked', e.target.value);
        setValue1(e.target.value);
    };

    const onChange2 = (e: RadioChangeEvent) => {
        console.log('radio2 checked', e.target.value);
        setValue2(e.target.value);
    };

    const onChange3 = (e: RadioChangeEvent) => {
        console.log('radio3 checked', e.target.value);
        setValue3(e.target.value);
    };

    return (
        <Space vertical align="start" spacing="loose">
            <RadioGroup options={plainOptions} onChange={onChange1} value={value1} aria-label="单选组合示例" name="demo-radio-group-1" />
            <RadioGroup options={optionsWithDisabled} onChange={onChange2} value={value2} aria-label="单选组合示例" name="demo-radio-group-2" />
            <RadioGroup options={options} onChange={onChange3} value={value3} aria-label="单选组合示例" name="demo-radio-group-3" />
        </Space>
    );
}

API Reference

Props

Property	Description	Type	Default
addonClassName	Class name of the container wrapping the content.	`string`	-
addonId	Id of the addon node, which aria-labelledby points to. Generated when omitted.	`string`	-
addonStyle	Inline style of the container wrapping the content.	`React.CSSProperties`	-
autoFocus	Whether the native input gets focus on mount.	`boolean`	`false`
checked	Whether the radio is checked, for controlled use. Ignored inside a RadioGroup.	`boolean`	-
children	Label of the radio, which can be any ReactNode and is rendered in the addon node.	`React.ReactNode`	-
className	Class name of the root label element.	`string`	-
defaultChecked	Whether the radio is initially checked, for uncontrolled use. Ignored inside a RadioGroup.	`boolean`	`false`
disabled	Whether the radio is disabled. It is also disabled when the enclosing RadioGroup is disabled.	`boolean`	-
displayMode	When set to `vertical`, the radio is displayed as a block and takes a line of its own.	`RadioDisplayMode`	-
extra	Supplementary text, which can be any ReactNode and is rendered below the label. aria-describedby points to it. Not rendered when type is `button`.	`React.ReactNode`	-
extraId	Id of the extra node, which aria-describedby points to. Generated when omitted.	`string`	-
mode	When set to `advanced`, a checked radio can be unchecked by clicking it or pressing Space. Inside a RadioGroup the group's mode applies.	`RadioMode`	`""`
name	The native input's name. It takes precedence over the enclosing RadioGroup's name.	`string`	-
onChange	Called when the checked state changes. `event.target` contains `checked`, `value`, `name` and `disabled`.	`Type`	-
prefixCls	CSS class name prefix. When omitted it falls back to the enclosing RadioGroup's value, then the global default, then `semi-radio`.	`string`	-
preventScroll	Whether focusing prevents the browser from scrolling the element into view. Applies to the `focus()` method.	`boolean`	-
ref	Handle providing the `focus()` and `blur()` methods. See Methods below.	`Type`	-
style	Inline style of the root label element.	`React.CSSProperties`	-
type	Style type: `default`, `button`, `card` or `pureCard`. Inside a RadioGroup the group's type applies.	`RadioType`	`"default"`
value	The radio's value, which RadioGroup compares to decide whether it is checked. It is also the native input's value in form submission.	`string \| number \| boolean`	-

Methods

Method	Description	Type
blur	Removes focus from the native input.	`Type`
focus	Focuses the native input. Whether it scrolls is decided by the `preventScroll` prop.	`Type`

id, name, tabIndex, autoFocus, aria-label, aria-labelledby, aria-describedby, aria-invalid and aria-errormessage land on the inner native input; other native attributes and events (such as onMouseEnter, onMouseLeave, onFocus and onBlur) land on the root label element. onClick is also bound on the root label, but fires only for clicks on the inner input, so a click on the label text triggers it once. A single Radio does not support aria-required; it is ignored.

RadioGroup

Props

Property	Description	Type	Default
buttonSize	Button size when `type` is `button`: `small`, `middle` or `large`.	`RadioGroupButtonSize`	`"middle"`
children	The Radios in the group. Ignored when `options` is set.	`React.ReactNode`	-
className	Class name of the root element.	`string`	-
defaultValue	The value selected by default when uncontrolled.	`string \| number \| boolean`	-
direction	Layout direction of the radios: `horizontal` or `vertical`. Has no effect when type is `button`.	`'horizontal' \| 'vertical'`	`"horizontal"`
disabled	Whether the whole group is disabled.	`boolean`	`false`
id	Id of the root element.	`string`	-
mode	When set to `advanced`, a checked radio can be unchecked by clicking it or pressing Space. On unchecking, `event.target.value` is `undefined`.	`RadioMode`	`""`
name	The name of every native input in the group. A unique value is generated per group when omitted.	`string`	-
onChange	Called when the selected value changes, and on every click when `mode` is `advanced`. `event.target` contains `checked`, `value`, `name` and `disabled`.	`Type`	-
options	Declares the options as data. Each item is a string or `{ label, value, disabled, extra, className, style, addonId, addonStyle, addonClassName, extraId }`, where `label` and `extra` can be ReactNode.	`Options`	-
prefixCls	CSS class name prefix.	`string`	-
ref	Reference to the root div element.	`Type`	-
style	Inline style of the root element.	`React.CSSProperties`	-
type	Style type of every Radio in the group: `default`, `button`, `card` or `pureCard`.	`RadioType`	`"default"`
value	The selected value, for controlled use.	`string \| number \| boolean`	-

aria-label, aria-required, aria-invalid, aria-errormessage and other native attributes, including onBlur, land on the root div with role="radiogroup". onBlur fires only when focus leaves the whole group. The aria-expanded, aria-haspopup, aria-controls and tabIndex injected by Tooltip are not rendered.

Methods

Radio

ref receives a handle (RadioHandle) providing focus() and blur(), which act on the inner native input. Whether focus() scrolls is decided by the preventScroll prop; see the API reference above for the members.

Accessibility

ARIA

aria-label: used to explain the role of Radio or RadioGroup
aria-labelledby points to the addon node, used to explain the content of Radio
aria-describedby points to the extra node, which is used to explain the content of Radio

aria-required, aria-invalid and aria-errormessage apply to RadioGroup only and are set on the role="radiogroup" element (the required and validation state of Form.RadioGroup land there too). ARIA does not support them on a single Radio; when Form.Radio fails validation, its error message is linked to the input through aria-describedby

Keyboard and focus

WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/

RadioGroup can be focused, the initial focus acquisition rules are as follows：
- When there is no selected item in the RadioGroup, the initial focus is on the first Radio item;
- When there are selected items in the RadioGroup, the initial focus is on the selected Radio item.
For radios belonging to the same radiogroup:
- You can use Right arrow or Down arrow to move the focus to the next Radio item, uncheck the previously focused Radio item, and select the currently focused Radio item;
- You can Use Left Arrow or Up Arrow to move the focus to the previous Radio item, at the same time uncheck the previously focused Radio item, and select the currently focused Radio item.
If there is no item selected in the RadioGroup, you can use the Space key to select the initial focus.
mode="advanced" is still a radio: arrow keys move the selection as usual, and clicking the selected item or pressing Space on it unchecks it.

Content Guidelines

Capitalize the first letter
No punctuation

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$transition_duration-radio-bg	var(--semi-transition_duration-none)	单选框-背景色-动画持续时间
$transition_function-radio-bg	var(--semi-transition_function-easeIn)	单选框-背景色-过渡曲线
$transition_delay-radio-bg	var(--semi-transition_delay-none)	单选框-背景色-延迟时间
$transition_duration-radio-border	var(--semi-transition_duration-none)	单选框-边框-动画持续时间
$transition_function-radio-border	var(--semi-transition_function-easeIn)	单选框-边框-过渡曲线
$transition_delay-radio-border	var(--semi-transition_delay-none)	单选框-边框-延迟时间
$color-radio_default-border-default	var(--semi-color-text-3)	单选圆圈描边颜色 - 默认态
$color-radio_default-bg-default	transparent	单选圆圈背景颜色 - 默认态
$color-radio_default-bg-hover	var(--semi-color-fill-0)	单选圆圈背景颜色 - 悬浮态
$color-radio_default-bg-active	var(--semi-color-fill-1)	单选圆圈背景颜色 - 按下态
$color-radio_default-border-hover	var(--semi-color-focus-border)	单选圆圈描边颜色 - 悬浮态
$color-radio_checked-border-hover	var(--semi-color-primary-hover)	选中状态单选圆圈描边颜色 - 悬浮态
$color-radio_checked-border-active	var(--semi-color-primary-active)	选中状态单选圆圈描边颜色 - 按下态
$color-radio_default-text-default	var(--semi-color-text-0)	选项文本颜色
$color-radio_extra-text-default	var(--semi-color-text-2)	辅助文本颜色
$color-radio_primary-bg-hover	var(--semi-color-primary-hover)	选中状态单选圆圈背景颜色 - 悬浮态
$color-radio_primary-bg-active	var(--semi-color-primary-active)	选中状态单选圆圈背景颜色 - 按下态
$color-radio_primary-border-default	var(--semi-color-primary)	选中状态单选圆圈描边颜色 - 默认态
$color-radio_primary-bg-default	var(--semi-color-primary)	选中状态单选圆圈背景颜色 - 默认态
$color-radio_primary-text-default	var(--semi-white)	选中状态单选圆圈中心圆点颜色
$color-radio_checked-bg-disabled	var(--semi-color-primary-disabled)	选中状态单选圆圈背景颜色 - 禁用态
$color-radio_default-border-disabled	var(--semi-color-border)	单选圆圈描边颜色 - 禁用态
$color-radio_checked-border-disabled	var(--semi-color-primary-disabled)	选中状态单选圆圈描边颜色 - 禁用态
$color-radio_disabled-bg-default	var(--semi-color-disabled-fill)	单选圆圈背景颜色 - 禁用态
$color-radio_disabled-bg-hover	transparent
$color-radio_disabled-text-default	var(--semi-color-disabled-text)	禁用态文本颜色
$color-radio_disabled-border-default	var(--semi-color-border)	单选圆圈描边颜色 - 禁用态
$color-radio_checked-icon-disabled	var(--semi-white)	选中且禁用状态下中心圆点颜色
$color-radio_buttonRadio-text-default	var(--semi-color-text-1)	按钮样式单选文本颜色
$color-radio_buttonRadio-bg-default	var(--semi-color-fill-0)	按钮样式单选背景颜色
$color-radio_buttonRadio-text-disabled	var(--semi-color-disabled-text)	按钮样式单选禁用态文本颜色
$color-radio_addon_buttonRadio-bg-hover	var(--semi-color-fill-1)	按钮样式单选悬浮态背景色
$color-radio_addon_buttonRadio-text-checked	var(--semi-color-primary)	按钮样式单选选中项文字颜色
$color-radio_addon_buttonRadio-bg-checked	var(--semi-color-bg-3)	按钮样式单选选中项背景颜色
$color-radio_cardRadioGroup-bg-default	transparent	卡片样式单选默认背景色
$color-radio_cardRadioGroup-bg-checked	var(--semi-color-primary-light-default)	卡片样式单选选中态背景色
$color-radio_cardRadioGroup_disabled-bg-checked	var(--semi-color-primary-light-default)	卡片样式单选选中且禁用时的背景色
$color-radio_cardRadioGroup_disabled-bg-active	transparent	卡片样式单选禁用时的背景色 - 按下态
$color-radio_cardRadioGroup-bg-hover	var(--semi-color-fill-0)	卡片样式单选悬浮态背景色
$color-radio_cardRadioGroup-bg-active	var(--semi-color-fill-1)	卡片样式单选按下态背景色
$color-radio_cardRadioGroup_border-default	transparent	卡片样式单选默认描边颜色
$color-radio_cardRadioGroup_border-active	var(--semi-color-primary)	卡片样式单选选中态描边颜色
$color-radio_cardRadioGroup_checked_border-active	var(--semi-color-primary-active)	卡片样式单选选中态描边颜色 - 按下态
$color-radio_cardRadioGroup_checked_border-hover	var(--semi-color-primary-hover)	卡片样式单选选中态描边颜色 - 悬浮态
$color-radio_cardRadioGroup_border_disabled-active	var(--semi-color-primary-disabled)	卡片样式单选选中且禁用时的描边颜色
$color-radio_cardRadioGroup_addon-text-default	var(--semi-color-text-0)	卡片样式单选标题文字颜色
$color-radio_cardRadioGroup_extra-text-default	var(--semi-color-text-2)	卡片样式单选辅助文字颜色
$color-radio_cardRadioGroup_checked_disabled-border-default	var(--semi-color-primary-disabled)	卡片样式选中项禁用态描边颜色 - 默认态
$color-radio_cardRadioGroup_checked_disabled-border-hover	var(--semi-color-primary-disabled)	卡片样式选中项禁用态描边颜色 - 悬浮态
$color-radio_card-bg-hover	var(--semi-color-white)	卡片模式下单选圆圈背景颜色 - 悬浮态
$color-radio_card-bg-active	var(--semi-color-white)	卡片模式下单选圆圈背景颜色 - 按下态
$color-radio_card-bg-default	var(--semi-color-white)	卡片模式下单选圆圈背景颜色 - 默认态
$color-radio_primary-outline-focus	$color-focus-ring	轮廓颜色 - 按键聚焦
$radius-radio_cardRadioGroup	var(--semi-border-radius-small)	卡片式单选圆角大小
$radius-radio_addon_buttonRadio	var(--semi-border-radius-small)	按钮式单选圆点圆角大小
$radius-radio_buttonRadio	var(--semi-border-radius-small)	按钮式单选圆角大小
$width-radio_cardRadioGroup_checked-border	1px	卡片式单选描边宽度
$width-radio_cardRadioGroup_checked_disabled-border	1px	卡片式单选选中且禁用时的描边宽度
$width-radio_hover-border	$border-thickness-control	描边宽度 - 悬浮态
$width-radio_disabled-border	$border-thickness-control	描边宽度 - 禁用态
$width-radio_innder-border	$border-thickness-control	描边宽度 - 禁用态
$width-radio-outline	$width-focus-ring	单选框轮廓宽度
$height-radio_inner_min	20px	单选按钮高度
$width-radio_inner	$width-icon-medium	单选按钮宽度
$spacing-radio_addon-paddingLeft	$spacing-tight	单选标题到单选按钮左侧边距
$spacing-radio_addon_buttonRadio_large-paddingX	$spacing-loose	大尺寸按钮式单选按钮水平内边距
$spacing-radio_addon_buttonRadio_large-paddingY	$spacing-base-tight * 0.5	大尺寸按钮式单选按钮垂直内边距
$spacing-radio_addon_buttonRadio_small-paddingX	$spacing-base	小尺寸按钮式单选按钮水平内边距
$spacing-radio_addon_buttonRadio_small-paddingY	$spacing-super-tight	中尺寸按钮式单选按钮垂直内边距
$spacing-radio_addon_buttonRadio_middle-paddingX	$spacing-base	中尺寸按钮式单选按钮水平内边距
$spacing-radio_addon_buttonRadio_middle-paddingY	$spacing-extra-tight	中尺寸按钮式单选按钮垂直内边距
$spacing-radio_content-rowGap	4px	内容行间距
$spacing-radio_group_vertical-marginBottom	$spacing-base-tight	垂直布局单选框组底部外边距
$spacing-radio_group_horizontal-marginRight	$spacing-base	水平单选框组右侧外边距
$spacing-radio_buttonRadio-padding	$spacing-extra-tight	按钮式单选内边距
$spacing-radio_buttonRadioGroup_small-paddingX	$spacing-super-tight	小尺寸按钮式单选组水平内边距
$spacing-radio_buttonRadioGroup_small-paddingY	$spacing-extra-tight	小尺寸按钮式单选组垂直内边距
$spacing-radio_buttonRadioGroup_middle-padding	$spacing-extra-tight	中尺寸按钮式单选组内边距
$spacing-radio_buttonRadioGroup_large-padding	$spacing-extra-tight	大尺寸按钮式单选组内边距
$spacing-radio_buttonRadioGroup-paddingRight	$spacing-none	中尺寸按钮式单选组右侧内边距
$spacing-radio_cardRadioGroup-paddingX	$spacing-base	卡片式单选组水平内边距
$spacing-radio_cardRadioGroup-paddingY	$spacing-base-tight	卡片式单选组垂直内边距
$font-radio_buttonRadio_large-default-size	$font-size-regular	大尺寸按钮式单选标题字体大小
$font-radio_buttonRadio_small-default-size	$font-size-small	中尺寸按钮式单选标题字体大小
$font-radio_buttonRadio_middle-default-size	$font-size-small	小尺寸按钮式单选标题字体大小
$font-radio_buttonRadio-default-fontWeight	$font-weight-bold	按钮式单选标题字重 - 默认态
$font-radio_buttonRadio-hover-fontWeight	$font-weight-bold	按钮式单选标题字重 - 悬浮态
$font-radio_buttonRadio-checked-fontWeight	$font-weight-bold	按钮式单选标题字重 - 选中态
$font-radio_buttonRadioGroup_small-lineHeight	16px	小尺寸按钮式单选标题行高
$font-radio_buttonRadioGroup_middle-lineHeight	16px	中尺寸按钮式单选标题行高
$font-radio_buttonRadioGroup_large-lineHeight	20px	大尺寸按钮式单选标题行高
$font-radio_cardRadioGroup_addon-size	$font-size-regular	卡片式单选组标题字体大小
$font-radio_cardRadioGroup_addon-fontWeight	$font-weight-bold	卡片式单选组标题字体大小
$font-radio_cardRadioGroup_addon-lineHeight	20px	卡片式单选组标题行高
$font-radio_cardRadioGroup_extra-size	$font-size-regular	卡片式单选组副标题字体大小
$font-radio_cardRadioGroup_extra-fontWeight	normal	卡片式单选组副标题字重
$font-radio_cardRadioGroup_extra-lineHeight	20px	卡片式单选组副标题行高