Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

RadioButtonGroup

unselected minimal usage

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>

selected minimal usage

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>

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

Contents

All components (A-Z)