---
title: RadioGroup
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/controls/RadioGroup
---

A group of `<Radio>` buttons. The `<Radio>` buttons may either be direct children or descendants of the radio group. `<Radio>` buttons inside a radio group must have a unique `value` assigned.

Once a radio group is established, selecting any `<Radio>` in that group automatically deselects any currently-selected `<Radio>` in the group.

**Note**: Setting `value` will override `defaultValue` as it puts the `RadioGroup` into a controlled state. `value` will not override `Radio` components that have `checked` set, as `RadioGroup` will take control of uncontrolled `Radio` components and can't override controlled ones.

The `onChange` event handler for `RadioGroup` will fire after any `onChange` event handler set on individual `Radio` components. However, it is highly recommended to only set one event handler for the whole group in a controlled `RadioGroup`.

### Usage

```jsx
import { RadioGroup } from 'nr1'
```

### Examples

#### Basic

```jsx
<RadioGroup defaultValue="2">
  <Radio label="Radio 1" value="1" />
  <Radio label="Radio 2" value="2" />
  <Radio label="Radio 3" value="3" />
</RadioGroup>
```

#### With label and info

```jsx
<RadioGroup label="Radio Group" info="Info value" defaultValue="2">
  <Radio label="Radio 1" value="1" />
  <Radio label="Radio 2" value="2" />
  <Radio label="Radio 3" value="3" />
</RadioGroup>
```

#### With inline label

```jsx
<RadioGroup label="Radio Group" labelInline defaultValue="2">
  <Radio label="Radio 1" value="1" />
  <Radio label="Radio 2" value="2" />
  <Radio label="Radio 3" value="3" />
</RadioGroup>
```

#### With description

```jsx
<RadioGroup
  label="Radio Group"
  description="Description value"
  defaultValue="2"
>
  <Radio label="Radio 1" value="1" />
  <Radio label="Radio 2" value="2" />
  <Radio label="Radio 3" value="3" />
</RadioGroup>
```

#### With invalid message

```jsx
<RadioGroup
  label="Radio Group"
  invalid="Invalid message value"
  defaultValue="2"
>
  <Radio label="Radio 1" value="1" />
  <Radio label="Radio 2" value="2" />
  <Radio label="Radio 3" value="3" />
</RadioGroup>
```

#### Controlled component

```jsx
class MyNerdlet extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      selectedValue: "2",
    };

    this.onChange = this.onChange.bind(this);
  }

  onChange(event, value) {
    this.setState((state) => {
      return { selectedValue: value };
    });
  }

  render() {
    return (
      <RadioGroup value={this.state.selectedValue} onChange={this.onChange}>
        <Radio label="Radio 1" value="1" />
        <Radio label="Radio 2" value="2" />
        <Radio label="Radio 3" value="3" />
      </RadioGroup>
    );
  }
}
```

### Props

| `children` node           | Content of the RadioGroup.                                                                                                                                                                                                                                                                                                                                         |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `className` string        | Appends class names to the component.                                                                                                                                                                                                                                                                                                                              |
| `defaultValue` any        | Default value of the radio group. The `<Radio>` with the matching value will be selected.Useful when you don't want to use a [controlled component](https://facebook.github.io/react/docs/forms.html).                                                                                                                                                             |
| `description` string      | Message with instructions on how to fill the form field.                                                                                                                                                                                                                                                                                                           |
| `info` string             | Additional information can be displayed in an info tooltip next to the Label.                                                                                                                                                                                                                                                                                      |
| `invalid` boolean\|string | When true, sets the field in an invalid state, in order to notify the user attention is needed over this particular field. This property can be a `boolean` field or a `string`. When it is a `string`, as well as the invalid state being shown, the text will be shown below.                                                                                    |
| `label` string            | Text to display as label.                                                                                                                                                                                                                                                                                                                                          |
| `labelInline` boolean     | Display the label inline the form control.Use only when the component is not inside a `Form`. In that case set `layoutType` to `Form.LAYOUT_TYPE.SPLIT` in the `Form` component.                                                                                                                                                                                   |
| `onChange` function       | Callback which is fired when the radio group value changes (a `<Radio>` in the group is selected).                                                                                                                                                                                                                                                                 |
| `required` boolean        | If `true`, denotes the form field as required.                                                                                                                                                                                                                                                                                                                     |
| `style` object            | Inline style for custom styling.                                                                                                                                                                                                                                                                                                                                   |
| `testId` string           | Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, `my-nerdpack.some-element`.**Note:** You might not see `data-test-id` attributes as they are removed from the DOM, to debug them pass a `e2e-test` query parameter to the URL. |
| `value` any               | Value of the radio group. The radio button with the matching value will be selected.If defined, it turns the component into a [controlled component](https://facebook.github.io/react/docs/forms.html).                                                                                                                                                            |