Top
RadioButtonGroup API - API
RadioButtonGroup API
Props (12)
Callback Props (1)
Styling Props (2)
Methods (2)
String|Number
default: undefined
Specifies initial value. Used for uncontrolled radio button groups.
For controlled behaviour, see radioValue.
import React from 'react'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
const options = [
  {
    value: 'v1',
    label: 'bananas'
  },
  {
    value: 'v2',
    label: 'grapes'
  },
  {
    value: 'v3',
    label: 'milk'
  },
  {
    value: 'v4',
    label: 'chocolate'
  }
];
class App extends React.Component {
  render() {
    return <div>
      <RadioButtonGroup
        defaultRadioValue="v2"
        radioOptions={options}
      />
    </div>
  }
}
export default () => <App />
Bool
default: false
Disables the radio button group, so any further interaction is not possible anymore. See also the readOnly prop.
If the radio button group is in a form, the selected value of a disabled group will not be submitted.
import React from 'react'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
const options = [
  {
    value: 'v1',
    label: 'bananas'
  },
  {
    value: 'v2',
    label: 'grapes'
  },
  {
    value: 'v3',
    label: 'milk'
  },
  {
    value: 'v4',
    label: 'chocolate'
  }
];
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { disabled: false }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={checked => this.setState({disabled: checked})}>disabled</CheckBox>
      </div>
      <RadioButtonGroup
        defaultRadioValue="v2"
        radioOptions={options}
        disabled={this.state.disabled}
      />
    </div>
  }
}
export default () => <App />
Bool
default: true
Enables keyboard navigation. Use ArrowLeft and ArrowRight to select the previous or next radio button.
The <RadioRadioButtonGroup /> must be focused in order for the keyboard navigation to work.
import React from 'react'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
const options = [
  {
    value: 'v1',
    label: 'bananas'
  },
  {
    value: 'v2',
    label: 'grapes'
  },
  {
    value: 'v3',
    label: 'milk'
  },
  {
    value: 'v4',
    label: 'chocolate'
  }
];
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { enableKeyboardNavigation: true }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.enableKeyboardNavigation}
          onChange={checked => this.setState({enableKeyboardNavigation: checked})}
        >enableKeyboardNavigation</CheckBox>
      </div>
      <RadioButtonGroup
        defaultRadioValue="v2"
        radioOptions={options}
        enableKeyboardNavigation={this.state.enableKeyboardNavigation}
      />
    </div>
  }
}
export default () => <App />
String
default: undefined
If specified, the checkbox value will be submitted under this name if inside a form. If this value is defined, the checkbox component will render a hidden input with the specified name value, so it works well with HTML forms that are submitted.
import React from 'react'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
const options = [
  {
    value: 'v1',
    label: 'bananas'
  },
  {
    value: 'v2',
    label: 'grapes'
  },
  {
    value: 'v3',
    label: 'milk'
  },
  {
    value: 'v4',
    label: 'chocolate'
  }
];
class App extends React.Component {
  render() {
    return <div>
      <form style={{padding: 30}}>
        <div>First name:</div>
        <div>
          <input type="text" name="firstname" value="React" onChange={() => {}} />
        </div>
        <div>Last name:</div>
        <div style={{ marginBottom: 20 }}>
          <input type="text" name="lastname" value="Toolkit" onChange={() => {}} />
        </div>
        <div>Choose an option:</div>
        <RadioButtonGroup
          defaultRadioValue="v2"
          name={'bananas'}
          radioOptions={options}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  }
}
export default () => <App />
String
default: "vertical"
Renders the radio buttons vertically or horizontally. Valid value are "vertical" and "horizontal".
import React from 'react'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
const options = [
  {
    value: 'v1',
    label: 'bananas'
  },
  {
    value: 'v2',
    label: 'grapes'
  },
  {
    value: 'v3',
    label: 'milk'
  },
  {
    value: 'v4',
    label: 'chocolate'
  }
];
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { orientation: "horizontal" }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <RadioButtonGroup
          defaultRadioValue="horizontal"
          radioOptions={[
            { label: 'horizontal', value: 'horizontal'},
            { label: 'vertical', value: 'vertical'}
          ]}
          orientation="horizontal"
          onChange={props => this.setState({orientation: props.checkedItemValue})}
        />
      </div>
      <RadioButtonGroup
        defaultRadioValue="v2"
        radioOptions={options}
        orientation={this.state.orientation}
      />
    </div>
  }
}
export default () => <App />
Object[]
default: undefined
Renders the radio buttons according to the given options.
import React from 'react'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
const options = [
  {
    value: 'v1',
    label: 'bananas'
  },
  {
    value: 'v2',
    label: 'grapes'
  },
  {
    value: 'v3',
    label: 'milk'
  },
  {
    value: 'v4',
    label: 'chocolate'
  }
];
class App extends React.Component {
  render() {
    return <div>
      <RadioButtonGroup
        radioOptions={options}
      />
    </div>
  }
}
export default () => <App />
String|Number
default: undefined
Controlled value prop, used in combination with onChange to react to changes.
For uncontrolled behaviour, see defaultRadioValue.
import React from 'react'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
const options = [
  {
    value: 'v1',
    label: 'bananas'
  },
  {
    value: 'v2',
    label: 'grapes'
  },
  {
    value: 'v3',
    label: 'milk'
  },
  {
    value: 'v4',
    label: 'chocolate'
  }
];
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { radioValue: 'v1' }
  }
  render() {
    return <div>
      <RadioButtonGroup
        radioValue={this.state.radioValue}
        onChange={props => this.setState({ radioValue: props.checkedItemValue })}
        radioOptions={options}
      />
    </div>
  }
}
export default () => <App />
Bool
default: false
Enables readOnly mode for the radio button group, so any further interaction is not possible anymore. See also the disabled prop.
If the radio button group is in a form, the selected value of a readOnly group will be submitted.
The form value will be submitted only if the radio button group has a name. See also the shouldSubmit prop.
import React from 'react'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
const options = [
  {
    value: 'v1',
    label: 'bananas'
  },
  {
    value: 'v2',
    label: 'grapes'
  },
  {
    value: 'v3',
    label: 'milk'
  },
  {
    value: 'v4',
    label: 'chocolate'
  }
];
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { readOnly: false }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={checked => this.setState({readOnly: checked})}>readOnly</CheckBox>
      </div>
      <RadioButtonGroup
        defaultRadioValue="v2"
        radioOptions={options}
        readOnly={this.state.readOnly}
      />
    </div>
  }
}
export default () => <App />
Fn()
default: undefined
Custom renderer for the <RadioButtonGroup />. Will render the given element instead of the default radio buttons. JSX syntax can be used for rendering custom radio buttons.
import React from 'react'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
const options = [
  {
    value: 'v1',
    label: 'bananas'
  },
  {
    value: 'v2',
    label: 'grapes'
  },
  {
    value: 'v3',
    label: 'milk'
  },
  {
    value: 'v4',
    label: 'chocolate'
  }
];
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { value: 'v1' }
  }
  renderItem(props) {
    return <CheckBox
      iconSize={16}
      {...props}
      checkedValue
      uncheckedValue={false}
    />
  }
  onChange(props) {
    this.setState({value: props.checkedItemValue})
  }
  render() {
    return <div>
      <RadioButtonGroup
        defaultRadioValue="v2"
        radioOptions={options}
        renderItem={this.renderItem}
        radioValue={this.state.value}
        onChange={this.onChange.bind(this)}
      />
    </div>
  }
}
export default () => <App />
Bool
default: false
Enables rtl (right-to-left) mode.
import React from 'react'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
const options = [
  {
    value: 'v1',
    label: 'bananas'
  },
  {
    value: 'v2',
    label: 'grapes'
  },
  {
    value: 'v3',
    label: 'milk'
  },
  {
    value: 'v4',
    label: 'chocolate'
  }
];
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { rtl: false }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox onChange={checked => this.setState({rtl: checked})}>rtl</CheckBox>
      </div>
      <RadioButtonGroup
        defaultRadioValue="v2"
        radioOptions={options}
        rtl={this.state.rtl}
      />
    </div>
  }
}
export default () => <App />
Bool|Fn(checked: Bool, props: Object)
default: undefined
This prop provides a fine-grained control over rendering the hidden input for submission. If this is true or returns true, the checkbox is also expected to have a name that is used as the name of the hidden input.
import React from 'react'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
const options = [
  {
    value: 'v1',
    label: 'bananas'
  },
  {
    value: 'v2',
    label: 'grapes'
  },
  {
    value: 'v3',
    label: 'milk'
  },
  {
    value: 'v4',
    label: 'chocolate'
  }
];
class App extends React.Component {
  render() {
    return <div>
      <form style={{padding: 30}}>
        <div>First name:</div>
        <div>
          <input type="text" name="firstname" value="React" onChange={() => {}} />
        </div>
        <div>Last name:</div>
        <div style={{ marginBottom: 20 }}>
          <input type="text" name="lastname" value="Toolkit" onChange={() => {}} />
        </div>
        <div>Choose an option:</div>
        <RadioButtonGroup
          shouldSubmit={true}
          name={'bananas'}
          radioOptions={options}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  }
}
export default () => <App />
Bool
default: false
Stretches the radio buttons along the available space.
import React from 'react'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
const options = [
  {
    value: 'v1',
    label: 'bananas'
  },
  {
    value: 'v2',
    label: 'grapes'
  },
  {
    value: 'v3',
    label: 'milk'
  },
  {
    value: 'v4',
    label: 'chocolate'
  }
];
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      stretched: true,
      orientation: false
    }
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.orientation}
          onChange={value => this.setState({orientation: value})}
        >vertical orientation</CheckBox>
      </div>
      <div style={{ marginBottom: 20 }}>
        <CheckBox
          checked={this.state.stretched}
          onChange={value => this.setState({stretched: value})}
        >stretch</CheckBox>
      </div>
      <RadioButtonGroup
        defaultRadioValue="v2"
        style={ this.state.orientation ? { height: 300 } : undefined }
        radioOptions={options}
        orientation={this.state.orientation ? 'vertical' : 'horizontal'}
        stretch={this.state.stretched}
      />
    </div>
  }
}
export default () => <App />
Fn({ props })
default: undefined
Called when a change occurs - when a radio button (or custom component) is clicked.
import React from 'react'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
const options = [
  {
    value: 'v1',
    label: 'bananas'
  },
  {
    value: 'v2',
    label: 'grapes'
  },
  {
    value: 'v3',
    label: 'milk'
  },
  {
    value: 'v4',
    label: 'chocolate'
  }
];
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { orientation: "horizontal" }
  }
  render() {
    return <div>
      <RadioButtonGroup
        defaultRadioValue="horizontal"
        radioOptions={[
          { label: 'horizontal', value: 'horizontal'},
          { label: 'vertical', value: 'vertical'}
        ]}
        orientation={this.state.orientation}
        onChange={props => this.setState({orientation: props.checkedItemValue})}
      />
    </div>
  }
}
export default () => <App />
String
default: undefined
This prop will be passed as className to the radio button group.
import React from 'react'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
const options = [
  {
    value: 'v1',
    label: 'bananas'
  },
  {
    value: 'v2',
    label: 'grapes'
  },
  {
    value: 'v3',
    label: 'milk'
  },
  {
    value: 'v4',
    label: 'chocolate'
  }
];
class App extends React.Component {
  render() {
    return <div>
      <RadioButtonGroup
        radioOptions={options}
        className="radio-button-class"
      />
    </div>
  }
}
export default () => <App />
Object
default: undefined
This prop will be passed as style to the group.
import React from 'react'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/CheckBox/index.css'
const options = [
  {
    value: 'v1',
    label: 'bananas'
  },
  {
    value: 'v2',
    label: 'grapes'
  },
  {
    value: 'v3',
    label: 'milk'
  },
  {
    value: 'v4',
    label: 'chocolate'
  }
];
class App extends React.Component {
  render() {
    return <div>
      <RadioButtonGroup
        radioOptions={options}
        style={{
          border: '1px solid darkgreen',
          background: 'antiquewhite',
          width: 100
        }}
      />
    </div>
  }
}
export default () => <App />
Fn()
default: undefined
The getValue method will return the current value of the radio button group.
import React from 'react'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/Button/index.css'
const options = [
  {
    value: 'value 1',
    label: 'bananas'
  },
  {
    value: 'value 2',
    label: 'grapes'
  },
  {
    value: 'value 3',
    label: 'milk'
  },
  {
    value: 'value 4',
    label: 'chocolate'
  }
];
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { currentValue: null }
  }
  getCurrentValue() {
    this.setState({currentValue: this.rbg.getValue()})
  }
  render() {
    return <div>
      <div style={{ marginBottom: 20 }}>
        Current value is: {this.state.currentValue}
      </div>
      <div style={{ marginBottom: 20 }}>
        <Button
          onClick={this.getCurrentValue.bind(this)}
        >Get current checked value</Button>
      </div>
      <RadioButtonGroup
        ref={rbg => this.rbg = rbg}
        defaultRadioValue="value 2"
        radioOptions={options}
      />
    </div>
  }
}
export default () => <App />
Fn(value)
default: undefined
The setValue method will set the value of the radio button group.
import React from 'react'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import '@zippytech/react-toolkit/Button/index.css'

const options = [
  {
    value: 'v1',
    label: 'bananas'
  },
  {
    value: 'v2',
    label: 'grapes'
  },
  {
    value: 'v3',
    label: 'milk'
  },
  {
    value: 'v4',
    label: 'chocolate'
  }
];

class App extends React.Component {

  setCurrentValue() {
    this.rbg.setValue('v4')
  }

  render() {
    return <div>
      <Button onClick={this.setCurrentValue.bind(this)}>Set the last radio button.</Button>
      <RadioButtonGroup
        ref={rbg => this.rbg = rbg}
        defaultRadioValue="v2"
        radioOptions={options}
      />
    </div>
  }
}
export default () => <App />