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

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