Skip to main content

RadioButtonGroup

Unselected minimal usage​

<RadioButtonGroup
  name="rbg"
  label="Radio Button Group"
  onBlur={() => console.log('blurred')}
  onChange={() => console.log('onChange')}
  onClick={() => console.log('onClick')}
  onFocus={() => console.log('onFocus')}
  onKeyDown={() => console.log('onKeyDown')}
>
  <RadioButton value="jaebaebae">First Value</RadioButton>
  <RadioButton value="value2">Second Value</RadioButton>
  <RadioButton value="value3">Third Value</RadioButton>
</RadioButtonGroup>

Selected minimal usage​

<RadioButtonGroup
  name="rbg-2"
  label="Radio Button Group"
  onBlur={() => console.log('blurred')}
  onChange={() => console.log('onChange')}
  onClick={() => console.log('onClick')}
  onFocus={() => console.log('onFocus')}
  onKeyDown={() => console.log('onKeyDown')}
  selectedIndex={1}
>
  <RadioButton value="jaebaebae">First Value</RadioButton>
  <RadioButton value="value2">Second Value</RadioButton>
  <RadioButton value="value3">Third Value</RadioButton>
</RadioButtonGroup>