Radio Button

The Radio component implements a Radio Button control, typically for use in forms. A Radio should be used in cases where a user must select one option between multiple choices. Checkboxes should generally not be used as a substitute for buttons-- they should not usually have immediate automatic actions associated. For example, if you want a control to submit a form upon click, you want a button.

<div>
  <div>
    <Radio name="singular" defaultValue="1" label="One" />
  </div>
  <div>
    <Radio name="singular" defaultValue="3" label="Has error" error />
  </div>
</div>

<div>
  <div>
    <Radio name="singular" defaultValue="1" label="One" />
  </div>
  <div>
    <Radio name="singular" defaultValue="3" label="Has error" error />
  </div>
</div>

React.createElement(
class Fieldset extends Component {
  get options() {
    return [
      {label: 'North', value: 'N'},
      {label: 'South', value: 'S'},
      {label: 'East disabled', value: 'E', disabled: true},
      {label: 'West', value: 'W'},
    ]
  }
  
  render() {
    return (
      <div>
        <Radio.Fieldset 
          name="fieldset_help" 
          options={this.options} 
          label="Has help text" 
          help="This is the help text." 
        />
        <Radio.Fieldset 
          name="fieldset_error" 
          options={this.options} 
          label="Has error" 
          error="This is the error." 
        />
        <Radio.Fieldset 
          name="fieldset_both" 
          options={this.options} 
          label="Stacks both help and error" 
          help="This is the help text." 
          error="This is the error." 
        />
      </div>
    )
  }
}
)

React.createElement(
class Fieldset extends Component {
  get options() {
    return [
      {label: 'North', value: 'N'},
      {label: 'South', value: 'S'},
      {label: 'East disabled', value: 'E', disabled: true},
      {label: 'West', value: 'W'},
    ]
  }
  
  render() {
    return (
      <div>
        <Radio.Fieldset 
          name="fieldset_help" 
          options={this.options} 
          label="Has help text" 
          help="This is the help text." 
        />
        <Radio.Fieldset 
          name="fieldset_error" 
          options={this.options} 
          label="Has error" 
          error="This is the error." 
        />
        <Radio.Fieldset 
          name="fieldset_both" 
          options={this.options} 
          label="Stacks both help and error" 
          help="This is the help text." 
          error="This is the error." 
        />
      </div>
    )
  }
}
)