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

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>

With label and info

<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

<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

<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

<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

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.
`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). `function (event: react.ChangeEvent, Event source of the callback. value: any The value of the selected radio button. )`
`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.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Examples

Basic

With label and info

With inline label

With description

With invalid message

Controlled component

Props

node

string

any

string

string

boolean|string

string

boolean

function

boolean

object

string

any

Usage