---
name: Radio
menu: Components
---

# Radio
import {Radio, RadioGroup} from './index'
import './style/index.scss'
import {Playground, Props} from 'docz'

## Props & Methods
### Radio
<Props of={Radio} />

### RadioGroup
<Props of={RadioGroup} />

## Basic Usage
<Playground>
    <Radio value="1">Normal</Radio>
    <span style={{display: 'inline-block', width: '10px',}}></span>
    <Radio value="2" checked>Checked</Radio>
    <span style={{display: 'inline-block', width: '10px',}}></span>
    <Radio value="3" disabled>Disabled</Radio>
    <span style={{display: 'inline-block', width: '10px',}}></span>
    <Radio value="4" checked disabled>Checked & Disabled</Radio>
    <span style={{display: 'inline-block', width: '10px',}}></span>
    <Radio value="5" checked >Checked & Disabled</Radio>
</Playground>

## Work with RadioGroup
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state={
                value: 'Option 1'
            }
            this.handleChange = this.handleChange.bind(this);
        }
        handleChange(value){
            this.setState({value})
        }
        render(){
            return <>
            <RadioGroup onChange={this.handleChange} value={this.state.value}>
            <Radio value="Option 1">Option 1</Radio>
            <Radio value="Option 2">Option 2</Radio>
            </RadioGroup>
            <p>你选的是: {this.state.value}</p>
            </>
        }
    }
    return <Example />
}
}
</Playground>