Radio 单选按钮

使用场景

单选按钮允许用户从一个数据集中选择单个选项。如果你觉得用户需要并排看到所有的可选项，使用单选按钮进行排他操作。此外，考虑使用下拉列表，相对于显示所有的选项占用更少的空间。

示例

基本示例

盒马先生

盒马先生

盒马迷你

盒马会员店

inline

function Basic() { return ( <Group> <Radio>盒马先生</Radio> <Radio checked>盒马先生</Radio> <Radio disabled>盒马迷你</Radio> <Radio checked disabled> 盒马会员店 </Radio> </Group> ); }

function Basic() {
  return (
    <Group>
      <Radio>盒马先生</Radio>
      <Radio checked>盒马先生</Radio>
      <Radio disabled>盒马迷你</Radio>
      <Radio checked disabled>
        盒马会员店
      </Radio>
    </Group>
  );
}

组合

无默认值

盒马鲜生

盒马 Mini

盒马X会员店

盒马菜场

有默认值

盒马鲜生

盒马 Mini

盒马X会员店

盒马菜场

noInline

const dataSource = [ { label: '盒马鲜生', value: 'hmxs' }, { label: '盒马 Mini', value: 'mini' }, { label: '盒马X会员店', value: 'hmx' }, { label: '盒马菜场', value: 'hmcc', disabled: true }, ]; function GroupDemo() { return ( <Group spacingY={8}> <h3>无默认值</h3> <RadioGroup dataSource={dataSource} onChange={console.log} /> <h3>有默认值</h3> <RadioGroup defaultValue="mini" dataSource={dataSource} onChange={console.log} /> </Group> ); } render(<GroupDemo />)

const dataSource = [
  { label: '盒马鲜生', value: 'hmxs' },
  { label: '盒马 Mini', value: 'mini' },
  { label: '盒马X会员店', value: 'hmx' },
  { label: '盒马菜场', value: 'hmcc', disabled: true },
];

function GroupDemo() {
  return (
    <Group spacingY={8}>
      <h3>无默认值</h3>
      <RadioGroup dataSource={dataSource} onChange={console.log} />

      <h3>有默认值</h3>
      <RadioGroup defaultValue="mini" dataSource={dataSource} onChange={console.log} />
    </Group>
  );
}

render(<GroupDemo />)

方向

盒马鲜生

盒马 Mini

盒马X会员店

盒马菜场

noInline

const dataSource = [ { label: '盒马鲜生', value: 'hmxs' }, { label: '盒马 Mini', value: 'mini' }, { label: '盒马X会员店', value: 'hmx' }, { label: '盒马菜场', value: 'hmcc', disabled: true }, ]; function Direction() { return <RadioGroup direction="column" dataSource={dataSource} onChange={console.log} />; } render(<Direction />)

const dataSource = [
  { label: '盒马鲜生', value: 'hmxs' },
  { label: '盒马 Mini', value: 'mini' },
  { label: '盒马X会员店', value: 'hmx' },
  { label: '盒马菜场', value: 'hmcc', disabled: true },
];

function Direction() {
  return <RadioGroup direction="column" dataSource={dataSource} onChange={console.log} />;
}

render(<Direction />)

受控

盒马鲜生

盒马 Mini

盒马X会员店

盒马菜场

noInline

const dataSource = [ { label: '盒马鲜生', value: 'hmxs' }, { label: '盒马 Mini', value: 'mini' }, { label: '盒马X会员店', value: 'hmx' }, { label: '盒马菜场', value: 'hmcc', disabled: true }, ]; function Controlled() { const [value, setValue] = useState('mini'); return <RadioGroup value={value} dataSource={dataSource} onChange={setValue} />; } render(<Controlled />)

const dataSource = [
  { label: '盒马鲜生', value: 'hmxs' },
  { label: '盒马 Mini', value: 'mini' },
  { label: '盒马X会员店', value: 'hmx' },
  { label: '盒马菜场', value: 'hmcc', disabled: true },
];

function Controlled() {
  const [value, setValue] = useState('mini');
  return <RadioGroup value={value} dataSource={dataSource} onChange={setValue} />;
}

render(<Controlled />)

API

Radio

字段	描述
name	string 所属分组名
value	string 分组值
checked	boolean 受控选中态
defaultChecked	boolean 非受控选中初值
disabled	boolean 禁用
readOnly	boolean 只读
onChange	(event: ChangeEvent<HTMLInputElement>) => void 选中状态变化时的回调
className	string

RadioGroup

字段	描述
name	string 分组名，用于当页面存在多个 Group 时进行区分
dataSource	ListNode<string>[] 列表
direction	FlexDirection 排列方向
value	string
defaultValue	string
onChange	FormControlOnChangeHandler<string>