Skip to main content

Radio group

Radio group in Storybook
Note: There are deprecated versions of this component. Switch to a version of the docs older than 10.0.x to view their docs.

Examples​

Check out the Usage section for details about how and when to use the RadioGroup and Radio components.

Basic radio group​

Radio cannot be used alone, outside of the RadioGroup context. RadioGroup should receive only Radio components as children. The label prop is mandatory in both components and the value prop is required for the Radio component only.

<RadioGroup label="This is a group">
  <Radio
    label="option 1"
    value="1"
  />
  <Radio
    label="option 2"
    value="2"
  />
</RadioGroup>

Disabled radio vs disabled radio group​

Both components provide a disabled property. However, when set to true at the RadioGroup level, it overrides any disable configuration from the Radio level. If there is any disabled={false} prop setting among the Radio options, but the RadioGroup sets it to disabled={true}, all options are disabled.

<RadioGroup
  label="This is a group"
  disabled={true}>
  <Radio
    label="option 1"
    value="1"
    disabled={false}
  />
  <Radio
    label="option 2"
    value="2"
    disabled={false}
  />
</RadioGroup>

Predefined option​

It is possible to define what option is initially selected by passing the value prop to the the initialValue property of the RadioGroup.

<RadioGroup
  label="This is a group with second option selected initially"
  initialValue="2">
  <Radio
    label="option 1"
    value="1"
  />
  <Radio
    label="option 2 is initially selected"
    value="2"
  />
</RadioGroup>

Horizontal group​

The RadioGroup component allows for the display of options in horizontal distribution by setting the horizontal property to true.

<RadioGroup
  label="This is a group"
  horizontal={true}>
  <Radio
    label="option 1"
    value="1"
    disabled={false}
  />
  <Radio
    label="option 2"
    value="2"
    disabled={false}
  />
</RadioGroup>

RadioGroup validations​

The RadioGroup component does not provide a specific validation logic but it provides a way to include the developer validation and use the stateMessages property to display any required error message.

This is an example of handling validation when the onChange event is triggered.

export function RadioValidation() {
  const [groupValidationMessages, setGroupValidationMessages] = useState({});

  const onChange = useCallback((e, newValue) => {
    setGroupValidationMessages({});

    if (newValue == '1') {
      setGroupValidationMessages({
        error: ['Only second option can be marked'],
      });
    }
  }, []);

  return (
    <RadioGroup
      label="Do not select the forbidden option"
      onChange={onChange}
      stateMessages={groupValidationMessages}>
      <Radio
        label="Do not select the forbidden option"
        value="1"
      />
      <Radio
        label="This option can be selected"
        value="2"
      />
    </RadioGroup>
  );
}

Controlled input​

RadioGroup has a value property which can be used for the controlled component scenario:

export function RadioControlled() {
  const [updatedValue, setNewValue] = useState('first given value');

  const onChange = (e, newValue) => {
    setNewValue(newValue.value);
  };

  return (
    <div>
      <Select
        label="Choose a value to be assigned"
        secondaryLabel="This value will be the option chosen below"
        onChange={onChange}>
        <SelectOption
          value={{
            id: '1',
            label: 'Option 1',
            value: '1',
          }}
        />
        <SelectOption
          value={{
            id: '2',
            label: 'Option 2',
            value: '2',
          }}
        />
      </Select>
      <br />
      <RadioGroup
        label="Changes with the above"
        value={updatedValue}>
        <Radio
          label="Option 1"
          value="1"
          disabled={true}
        />
        <Radio
          label="Option 2"
          value="2"
          disabled={true}
        />
      </RadioGroup>
    </div>
  );
}

Using ref to set focus​

RadioGroup and certain other inputs, allow you to use a ref property to access some native behaviors. However, only some features are exposed. In this case, when the button is clicked, the focus is automatically set in the input below.

<RadioGroup
  label="This is a group with second option selected initially"
  initialValue="2">
  <Radio
    label="option 1"
    value="1"
  />
  <Radio
    label="option 2 is initially selected"
    value="2"
  />
</RadioGroup>