Gravity UI – UIKit

import {RadioGroup} from '@gravity-ui/uikit';

该 RadioGroup 组件用于创建群组，用户可以在其中从多个选项中选择一个选项。

禁用状态

Value 1Value 2Value 3

const options: RadioGroupOption[] = [
  {value: 'Value 1', content: 'Value 1'},
  {value: 'Value 2', content: 'Value 2'},
  {value: 'Value 3', content: 'Value 3'},
];
<RadioGroup name="group2" defaultValue={options[0].value} options={options} disabled/>

大小

使用该 size 属性来管理大 RadioGroup 小。默认大小为 m。

const options: RadioGroupOption[] = [
  {value: 'Value 1', content: 'Value 1'},
  {value: 'Value 2', content: 'Value 2'},
  {value: 'Value 3', content: 'Value 3'},
];
<RadioGroup name="group1" defaultValue={options[0].value} options={options} size="m"/>
<RadioGroup name="group2" defaultValue={options[0].value} options={options} size="l"/>

方向

使用该 direction 属性来管理方 RadioGroup 向。默认方向是 horizontal。

const options: RadioGroupOption[] = [
  {value: 'Value 1', content: 'Value 1'},
  {value: 'Value 2', content: 'Value 2'},
  {value: 'Value 3', content: 'Value 3'},
];
<RadioGroup name="group1" defaultValue={options[0].value} options={options} direction="horizontal"/>
<RadioGroup name="group2" defaultValue={options[0].value} options={options} direction="vertical"/>

属性

姓名	描述	类型	默认
儿童	广播组的内容。	`ReactNode`
残疾的	切换无线电组的 `disabled` 状态。	`boolean`	`false`
选项	广播组的选项。	`RadioGroupOption[]`
optionClassName	`class` 电台儿童的 HTML 属性。	`string`
方向	确定无线电组的方向。	`horizontal - vertical`	`"horizontal"`
defaultValue	设置组件挂载时的初始值状态。	`string`
onUpdate	当用户更改无线电状态并将新值作为回调参数提供时触发。	`(value: string) => void`
onChange	当用户更改无线电状态并将更改事件作为回调参数时触发。	`Function`
尺寸	确定无线电组的大小。	`m` `l`	`m`
qa	`data-qa` HTML 属性，用于测试	`string`
风格	`style` HTML 属性	`React.CSSProperties`
className	`class` HTML 属性	`string`

无线电组选项

该 RadioGroup 组件还导出等效的嵌套 Option 组件 Radio ，该组件可用于在中创建单选选项 RadioGroup。

Value 1Value 2Value 3

const options: RadioGroupOption[] = [
  {value: 'Value 1', content: 'Value 1'},
  {value: 'Value 2', content: 'Value 2'},
  {value: 'Value 3', content: 'Value 3'},
];
<RadioGroup name="group1" defaultValue={options[0].value}>
  <RadioGroup.Option content={options[0].content} value={options[0].value} />
  <RadioGroup.Option content={options[1].content} value={options[1].value} />
  <RadioGroup.Option content={options[2].content} value={options[2].value} />
</RadioGroup>

属性

姓名	描述	类型	默认
儿童	电台的内容（通常是标签）。	`ReactNode`
内容	电台的内容（儿童替代品）。	`ReactNode`
残疾的	切换无线电的 `disabled` 状态。	`boolean`	`false`
价值	控制值	`string`

RadioGroup

§禁用状态

§大小

§方向

§属性

§无线电组选项

§属性

禁用状态

大小

方向

属性

无线电组选项

属性