RadioButtonGroup

unselected minimal usage

Show editable code example

Any Paragon component or export may be added to the code example.

<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>

<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

Show editable code example

Any Paragon component or export may be added to the code example.

<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>

<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>

Props API#

RadioButtonGroup Props API

children element[] Required
label string Required
specifies the aria-label value for the RadioButtonGroup
name string Required
specifies the name value for the RadioButtonGroup so that no more than one RadioButton can be selected at any given time
onBlur func
specifies the callback for the onBlur event for each RadioButton within the group. The default value is a no-op function.
Default() => {}
onChange func
specifies the callback for the onChange event for each RadioButton within the group. The default value is a no-op function.
Default() => {}
onClick func
specifies the callback for the onClick event for each RadioButton within the group. The default value is a no-op function.
Default() => {}
onFocus func
specifies the callback for the onFocus event for each RadioButton within the group. The default value is a no-op function.
Default() => {}
onKeyDown func
specifies the callback for the onKeyDown event for each RadioButton within the group. The default value is a no-op function.
Default() => {}
selectedIndex number
specifies which RadioButton is initially selected. The default value is undefined which signifies that no RadioButton is initially selected.

Leave feedback

Paragon Design System

Theme

RadioButtonGroup

unselected minimal usage

selected minimal usage

Props API#

All components (A-Z)

Theme

RadioButtonGroup

unselected minimal usage#

selected minimal usage#

Props API#

All components (A-Z)

unselected minimal usage

selected minimal usage