import React from 'react'; import { Radio } from '@douyinfe/semi-ui'; () => ( <Radio aria-label="单选示例" name="demo-radio">Radio</Radio> );

import React from 'react'; import { Radio } from '@douyinfe/semi-ui'; () => ( <Radio extra="Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统" aria-label="单选示例" name="demo-radio-extra"> Semi Design </Radio> );

import React, { useState } from 'react'; import { Radio, Button } from '@douyinfe/semi-ui'; () => { 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> ); };

import React, { useState } from 'react'; import { Radio } from '@douyinfe/semi-ui'; () => { const [checked, setChecked] = useState(true); const toggle = (e) => { 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> ); };

import React from 'react'; import { RadioGroup, Radio } from '@douyinfe/semi-ui'; () => { const [value, setValue] = useState(1); const onChange = (e) => { 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> ); };

import React from 'react'; import { RadioGroup, Radio } from '@douyinfe/semi-ui'; () => ( <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> );

import React from 'react'; import { RadioGroup, Radio, Space } from '@douyinfe/semi-ui'; () => { 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> ); };

import React from 'react'; import { RadioGroup, Radio } from '@douyinfe/semi-ui'; () => ( <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> );

import React from 'react'; import { RadioGroup, Radio } from '@douyinfe/semi-ui'; () => ( <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> );

import React from 'react'; import { RadioGroup, Space } from '@douyinfe/semi-ui'; class App extends React.Component { constructor() { super(); this.state = { value1: 'Guest', value2: 'Developer', value3: 'Maintainer', }; this.plainOptions = ['Guest', 'Developer', 'Maintainer']; this.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 } }, ]; this.optionsWithDisabled = [ { label: 'Guest', value: 'Guest' }, { label: 'Developer', value: 'Developer' }, { label: 'Maintainer', value: 'Maintainer', disabled: true }, ]; this.onChange1 = this.onChange1.bind(this); this.onChange2 = this.onChange2.bind(this); this.onChange3 = this.onChange3.bind(this); } onChange1(e) { console.log('radio1 checked', e.target.value); this.setState({ value1: e.target.value, }); } onChange2(e) { console.log('radio2 checked', e.target.value); this.setState({ value2: e.target.value, }); } onChange3(e) { console.log('radio3 checked', e.target.value); this.setState({ value3: e.target.value, }); } render() { return ( <Space vertical align='start' spacing='loose'> <RadioGroup options={this.plainOptions} onChange={this.onChange1} value={this.state.value1} aria-label="单选组合示例" name="demo-radio-group-1" /> <RadioGroup options={this.optionsWithDisabled} onChange={this.onChange2} value={this.state.value2} aria-label="单选组合示例" name="demo-radio-group-2" /> <RadioGroup options={this.options} onChange={this.onChange3} value={this.state.value3} aria-label="单选组合示例" name="demo-radio-group-3" /> </Space> ); } }