# Radio 普通用法

- order : 0
- title_en: Radio usage

---

```js
<NukePlayGround>
  // easy
  <Radio checked={true} disabled={true} />
  // type:dot,empty,list
  <Radio type="dot" checked={true} disabled={true} />
  // size: smaill,medium
  <Radio size="small" checked={true} disabled={true} disabledStyle={{ color: 'red', borderColor: 'red' }} />
  // custom style
  <Radio checked={true} disabled={true} style={{ borderColor: 'blue' }} />
</NukePlayGround>
```

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Radio from 'nuke-radio';
import Button from 'nuke-button';
import Page from 'nuke-page';

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      checked: false
    };
  }

  onChange = () => {
    let tmp = this.state.checked;
    this.setState({
      checked: !tmp
    });
  };
  onPress() {
    let tmp = this.state.checked;
    this.setState({
      checked: !tmp
    });
  }
  getChangeResult = (value) => {
    console.log(value);
  };

  render() {
    return (
      <Page title="Radio">
        <Page.Intro main="Radio" sub="normal" />
        <View style={Styles.demo_item}>
          <Radio />
          <Radio checked={true} />
          <Radio disabled={true} />
          <Radio
            checked={true}
            disabled={true}
            style={{ backgroundImage: `linear-gradient(to right,#ff9a9e,#fad0c4` }}
          />
        </View>
        <Page.Intro sub="dot" />
        <View style={Styles.demo_item}>
          <Radio type="dot" />
          <Radio type="dot" checked={true} />
          <Radio type="dot" disabled={true} />
          <Radio type="dot" checked={true} disabled={true} />
        </View>

        <Page.Intro sub="empty" />
        <View style={Styles.demo_item}>
          <Radio type="empty" />
          <Radio type="empty" checked={true} />
          <Radio type="empty" disabled={true} />
          <Radio type="empty" checked={true} disabled={true} />
        </View>

        <Page.Intro sub="list" />
        <View style={Styles.demo_item}>
          <Radio type="list" />
          <Radio type="list" checked={true} />
          <Radio type="list" disabled={true} />
          <Radio type="list" checked={true} disabled={true} />
        </View>
        <Page.Intro sub="size" />
        <View style={Styles.demo_item}>
          <Radio size="small" />
          <Radio size="small" checked={true} />
          <Radio />
          <Radio checked={true} />
        </View>
        <Page.Intro main="custom" />
        <View style={Styles.demo_item}>
          <Radio
            size="small"
            checked={true}
            disabled={true}
            disabledStyle={{ color: 'red', borderColor: 'red' }}
            type="dot"
          />
          <Radio
            defaultChecked={true}
            type="dot"
            style={{ color: 'blue', borderColor: 'blue' }}
            checkedStyle={{ color: 'red', borderColor: 'red' }}
          />
        </View>
      </Page>
    );
  }
};
const Styles = {
  demo_item: {
    height: 104,
    marginBottom: 30,
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 22
  },
  demo_result: {
    backgroundColor: '#ffffff',
    paddingLeft: 32,
    height: 60,
    justifyContent: 'center',
    color: '#666666'
  }
};
render(<App />);
```