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.

Usage

import { RadioGroup } from 'nr1'

Examples

Basic

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

1
<RadioGroup defaultValue="2">
2
  <Radio label="Radio 1" value="1" />
3
  <Radio label="Radio 2" value="2" />
4
  <Radio label="Radio 3" value="3" />
5
</RadioGroup>;

ReferenceError: RadioGroup is not defined

Controlled component

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>
    );
  }
}

1
class MyNerdlet extends React.PureComponent {
2
  constructor(props) {
3
    super(props);
4
5
    this.state = {
6
      selectedValue: '2',
7
    };
8
9
    this.onChange = this.onChange.bind(this);
10
  }
11
12
  onChange(event, value) {
13
    this.setState((state) => {
14
      return { selectedValue: value };
15
    });
16
  }
17
18
  render() {
19
    return (
20
      <RadioGroup value={this.state.selectedValue} onChange={this.onChange}>
21
        <Radio label="Radio 1" value="1" />
22
        <Radio label="Radio 2" value="2" />
23
        <Radio label="Radio 3" value="3" />
24
      </RadioGroup>
25
    );
26
  }
27
}

Props

childrennode

Content of the RadioGroup.

classNamestring

Appends class names to the component.

defaultValueany

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.

infostring

Additional information can be displayed in an info tooltip next to the Label.

labelstring

Text to display as label.

onChangefunction

Callback which is fired when the radio group value changes (a <Radio> in the group is selected).

function (event: Event, // Event source of the callback.
value: any // The value of the selected radio button.
) => undefined

styleobject

Inline style for custom styling.

testIdstring

Adds a data-test-id.

Used to target the component in unit and e2e testing.

valueany

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.

Methods

`RadioGroup.render`

function () => undefined