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>

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

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

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

Paragon Design System

RadioButtonGroup

unselected minimal usage

selected minimal usage

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

RadioButtonGroup

unselected minimal usage#

selected minimal usage#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

unselected minimal usage

selected minimal usage