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

import React from 'react'; import { Radio } from '@douyinfe/semi-ui'; () => ( <Radio extra="Semi Design is a design system developed and maintained by IES Front-end Team and UED Team" aria-label="Radio demo" name="demo-radio-extra"> Semi Design </Radio> );

import React from 'react'; import { Radio, Button } from '@douyinfe/semi-ui'; class App extends React.Component { constructor() { super(); this.state = { disabled: true, }; this.toggleDisabled = this.toggleDisabled.bind(this); } toggleDisabled() { this.setState({ disabled: !this.state.disabled, }); } render() { return ( <div> <Radio defaultChecked={false} disabled={this.state.disabled} aria-label="Radio demo" name="demo-radio-disabled"> Disabled </Radio> <br /> <Radio defaultChecked disabled={this.state.disabled} aria-label="Radio demo" name="demo-radio-defaultChecked-disabled"> Disabled </Radio> <div style={{ marginTop: 20 }}> <Button type="primary" onClick={this.toggleDisabled} aria-label="Radio demo"> Toggle disabled </Button> </div> </div> ); } }

import React from 'react'; import { Radio } from '@douyinfe/semi-ui'; class App extends React.Component { constructor() { super(); this.state = { checked: true, }; this.onChange = this.onChange.bind(this); } onChange(e) { console.log('radio checked', e.target.checked); this.setState({ checked: e.target.checked, }); } render() { return ( <div> <Radio checked={this.state.checked} mode="advanced" onChange={this.onChange} aria-label="Radio demo" name="demo-radio-advanced"> Click Again to Uncheck </Radio> </div> ); } }

import React from 'react'; import { Radio, RadioGroup } from '@douyinfe/semi-ui'; class App extends React.Component { constructor() { super(); this.state = { value: 1, }; this.onChange = this.onChange.bind(this); } onChange(e) { console.log('radio checked', e.target.value); this.setState({ value: e.target.value, }); } render() { return ( <RadioGroup onChange={this.onChange} value={this.state.value} aria-label="RadioGroup demo" 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="RadioGroup demo" 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 { Radio, RadioGroup, Space } from '@douyinfe/semi-ui'; class App extends React.Component { constructor() { super(); this.state = { value1: 1, value2: 1, value3: 1, }; this.onChange1 = this.onChange1.bind(this); this.onChange2 = this.onChange2.bind(this); this.onChange3 = this.onChange3.bind(this); } onChange1(e) { this.setState({ value1: e.target.value, }); } onChange2(e) { this.setState({ value2: e.target.value, }); } onChange3(e) { this.setState({ value3: e.target.value, }); } render() { return ( <Space vertical spacing="loose" align="start"> <RadioGroup type="button" buttonSize="small" onChange={this.onChange1} value={this.state.value1} aria-label="RadioGroup demo" name="demo-radio-small"> <Radio value={1}>Instant push</Radio> <Radio value={2}>Timed push</Radio> <Radio value={3}>Dynamic push</Radio> </RadioGroup> <RadioGroup type="button" buttonSize="middle" onChange={this.onChange2} value={this.state.value2} aria-label="RadioGroup demo" name="demo-radio-middle"> <Radio value={1}>Instant push</Radio> <Radio value={2}>Timed push</Radio> <Radio value={3}>Dynamic push</Radio> </RadioGroup> <RadioGroup type="button" buttonSize="large" onChange={this.onChange3} value={this.state.value3} aria-label="RadioGroup demo" name="demo-radio-large"> <Radio value={1}>Instant push</Radio> <Radio value={2}>Timed push</Radio> <Radio value={3}>Dynamic push</Radio> </RadioGroup> </Space> ); } }

import React from 'react'; import { RadioGroup, Radio } from '@douyinfe/semi-ui'; () => ( <RadioGroup type='card' defaultValue={1} direction='vertical' aria-label="RadioGroup demo" name="demo-radio-group-card"> <Radio value={1} extra='Radio description' style={{ width: 280 }}> Radio Title </Radio> <Radio value={2} disabled extra='Radio description' style={{ width: 280 }}> Radio Title </Radio> <Radio value={3} extra='Radio description' style={{ width: 280 }}> Radio Title </Radio> </RadioGroup> );

import React from 'react'; import { RadioGroup, Radio } from '@douyinfe/semi-ui'; () => ( <RadioGroup type='pureCard' defaultValue={1} direction='vertical' aria-label="RadioGroup demo" name="demo-radio-group-pureCard"> <Radio value={1} extra='Radio description' style={{ width: 280 }}> Radio Title </Radio> <Radio value={2} disabled extra='Radio description' style={{ width: 280 }}> Radio Title </Radio> <Radio value={3} extra='Radio description' style={{ width: 280 }}> Radio Title </Radio> </RadioGroup> );

import React from 'react'; import { RadioGroup } 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 ( <div> <RadioGroup options={this.plainOptions} onChange={this.onChange1} value={this.state.value1} aria-label="RadioGroup demo" name="demo-radio-group-1"/> <br /> <br /> <RadioGroup options={this.optionsWithDisabled} onChange={this.onChange2} value={this.state.value2} aria-label="RadioGroup demo" name="demo-radio-group-2"/> <br /> <br /> <RadioGroup options={this.options} onChange={this.onChange3} value={this.state.value3}aria-label="RadioGroup demo" name="demo-radio-group-3"/> </div> ); } }