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

When a user can choose only one of the options provided

The radio button state can be controlled through the `checked` property. If the `checked` prop is not set then the radio button will manage its own state.

You can listen to the radio button events through the `onClick` or the `onChange` props.

### Usage

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

### Examples

#### Basic

```jsx
<div className="nr1-Docs-prettify">
  <Radio onChange={(event) => alert('Foo')} label="Foo" />
  <Radio checked label="Bar" />
  <Radio checked disabled label="Baz" />
</div>
```

#### With info

```jsx
<Radio 
  onChange={(event) => alert("Foo")} 
  info="Info value" 
  label="Foo" 
/>
```

#### With description

```jsx
<Radio
  onChange={(event) => alert('Foo')}
  description="Description value"
  label="Foo"
/>
```

#### With invalid message

```jsx
<Radio
  onChange={(event) => alert('Foo')}
  invalid="Invalid message value"
  label="Foo"
/>
```

#### Controlled component

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

    this.state = {
      isChecked: false,
    };

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

  onClick(event) {
    this.setState((state) => {
      return { isChecked: !state.isChecked };
    });
  }

  render() {
    return (
      <Radio
        checked={this.state.isChecked}
        onClick={this.onClick}
        label="Radio button"
      />
    );
  }
}
```

### Props

| `checked` boolean         | If `true`, the radio button is checked.If defined, it turns the input into a [controlled component](https://facebook.github.io/react/docs/forms.html).                                                                                                                                                                                                              |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` string        | Appends class names to the component.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                      |
| `description` string      | Message with instructions on how to fill the form field.                                                                                                                                                                                                                                                                                                            |
| `disabled` boolean        | If `true`, the radio button is not available for interaction.                                                                                                                                                                                                                                                                                                       |
| `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.                                                                                                                                                                                                                                                                                                                                           |
| `onChange` function       | Callback fired any time the selected state of the radio button changes.                                                                                                                                                                                                                                                                                             |
| `onClick` function        | Callback fired any time the radio button is clicked.                                                                                                                                                                                                                                                                                                                |
| `spacingType` enum\[]     | Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like `margin` or `padding`. To omit a value, use `SPACING_TYPE.OMIT`. Radio.SPACING_TYPE.EXTRA_LARGE, Radio.SPACING_TYPE.LARGE, Radio.SPACING_TYPE.MEDIUM, Radio.SPACING_TYPE.NONE, Radio.SPACING_TYPE.OMIT, Radio.SPACING_TYPE.SMALL   |
| `style` object            | Inline style for custom styling.Should be used only for positioning and spacing purposes.                                                                                                                                                                                                                                                                           |
| `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` string            | The value of the component. Used by the `<RadioGroup/>` to identify the selected radio button.                                                                                                                                                                                                                                                                      |