Default Gray Amethyst

Radio Group

<mo-radio-group> | MORadioGroup
Since 3.0 stable

Radio groups are used to group multiple radios or radio buttons so they function as a single form control.

Option 1 Option 2 Option 3 
<mo-radio-group label="Select an option" name="a" value="1">
  <mo-radio value="1">Option 1</mo-radio>
  <mo-radio value="2">Option 2</mo-radio>
  <mo-radio value="3">Option 3</mo-radio>
</mo-radio-group>

import MORadio from '@metsooutotec/modes-web-components/dist/react/radio';
import MORadioGroup from '@metsooutotec/modes-web-components/dist/react/radio-group';

const App = () => (
  <MORadioGroup label="Select an option" name="a" value="1">
    <MORadio value="1">Option 1</MORadio>
    <MORadio value="2">Option 2</MORadio>
    <MORadio value="3">Option 3</MORadio>
  </MORadioGroup>
);

Examples

Help text

Add descriptive help text to a radio group with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.

Option 1 Option 2 Option 3 
<mo-radio-group label="Select an option" help-text="Choose the most appropriate option." name="a" value="1">
  <mo-radio value="1">Option 1</mo-radio>
  <mo-radio value="2">Option 2</mo-radio>
  <mo-radio value="3">Option 3</mo-radio>
</mo-radio-group>

import MORadio from '@metsooutotec/modes-web-components/dist/react/radio';
import MORadioGroup from '@metsooutotec/modes-web-components/dist/react/radio-group';

const App = () => (
  <MORadioGroup label="Select an option" help-text="Choose the most appropriate option." name="a" value="1">
    <MORadio value="1">Option 1</MORadio>
    <MORadio value="2">Option 2</MORadio>
    <MORadio value="3">Option 3</MORadio>
  </MORadioGroup>
);

Hiding the fieldset

Use the hide-fieldset attribute to hide the fieldset styling (border, padding).

Option 1 Option 2 Option 3 
<mo-radio-group
  hide-fieldset
  label="Select an option"
  help-text="Choose the most appropriate option."
  name="a"
  value="1"
>
  <mo-radio value="1">Option 1</mo-radio>
  <mo-radio value="2">Option 2</mo-radio>
  <mo-radio value="3">Option 3</mo-radio>
</mo-radio-group>

import MORadio from '@metsooutotec/modes-web-components/dist/react/radio';
import MORadioGroup from '@metsooutotec/modes-web-components/dist/react/radio-group';

const App = () => (
  <MORadioGroup
    hideFieldset
    label="Select an option"
    help-text="Choose the most appropriate option."
    name="a"
    value="1"
  >
    <MORadio value="1">Option 1</MORadio>
    <MORadio value="2">Option 2</MORadio>
    <MORadio value="3">Option 3</MORadio>
  </MORadioGroup>
);

Radio buttons

Radio buttons offer an alternate way to display radio controls. In this case, an internal button group is used to group the buttons into a single, cohesive control.

Option 1 Option 2 Option 3 
<mo-radio-group label="Select an option" help-text="Select one of the buttons." name="a" value="1">
  <mo-radio-button value="1">Option 1</mo-radio-button>
  <mo-radio-button value="2">Option 2</mo-radio-button>
  <mo-radio-button value="3">Option 3</mo-radio-button>
</mo-radio-group>

import MORadioButton from '@metsooutotec/modes-web-components/dist/react/radio-button';
import MORadioGroup from '@metsooutotec/modes-web-components/dist/react/radio-group';

const App = () => (
  <MORadioGroup label="Select an option" name="a" value="1">
    <MORadioButton value="1">Option 1</MORadioButton>
    <MORadioButton value="2">Option 2</MORadioButton>
    <MORadioButton value="3">Option 3</MORadioButton>
  </MORadioGroup>
);

Disabling options

Radios and radio buttons can be disabled by adding the disabled attribute to the respective options inside the radio group.

Option 1 Option 2 Option 3 
<mo-radio-group label="Select an option" name="a" value="1">
  <mo-radio value="1">Option 1</mo-radio>
  <mo-radio value="2" disabled>Option 2</mo-radio>
  <mo-radio value="3">Option 3</mo-radio>
</mo-radio-group>

import MORadio from '@metsooutotec/modes-web-components/dist/react/radio';
import MORadioGroup from '@metsooutotec/modes-web-components/dist/react/radio-group';

const App = () => (
  <MORadioGroup label="Select an option" name="a" value="1">
    <MORadio value="1">Option 1</MORadio>
    <MORadio value="2" disabled>
      Option 2
    </MORadio>
    <MORadio value="3">Option 3</MORadio>
  </MORadioGroup>
);

Sizing options

The size of Radios and Radio Buttons will be determined by the Radio Group’s size attribute.

Small Medium Large 
<mo-radio-group label="Select an option" size="medium" value="medium" class="radio-group-size">
  <mo-radio value="small">Small</mo-radio>
  <mo-radio value="medium">Medium</mo-radio>
  <mo-radio value="large">Large</mo-radio>
</mo-radio-group>

<script>
  const radioGroup = document.querySelector('.radio-group-size');

  radioGroup.addEventListener('mo-change', () => {
    radioGroup.size = radioGroup.value;
  });
</script>

import { useState } from 'react';
import MORadio from '@metsooutotec/modes-web-components/dist/react/radio';
import MORadioGroup from '@metsooutotec/modes-web-components/dist/react/radio-group';

const App = () => {
  const [size, setSize] = useState('medium');

  return (
    <>
      <MORadioGroup
        label="Select an option"
        size={size}
        value={size}
        class="radio-group-size"
        onMOChange={event => setSize(event.target.value)}
      >
        <MORadio value="small">Small</MORadio>
        <MORadio value="medium">Medium</MORadio>
        <MORadio value="large">Large</MORadio>
      </MORadioGroup>
    </>
  );
};

Error and success states

You can display error and success messages on the group by using the error-text and success-text attributes.

Option 1 Option 2 Option 3
Option 1 Option 2 Option 3 
<mo-radio-group required label="Error checkboxes" name="a" error-text="Please choose at least one option.">
  <mo-radio value="1">Option 1</mo-radio>
  <mo-radio value="2">Option 2</mo-radio>
  <mo-radio value="3">Option 3</mo-radio>
</mo-radio-group>

<br/>

<mo-radio-group label="Success checkboxes" name="a" value="2" success-text="This is a success message">
  <mo-radio value="1">Option 1</mo-radio>
  <mo-radio value="2">Option 2</mo-radio>
  <mo-radio value="3">Option 3</mo-radio>
</mo-radio-group>

import { useState } from 'react';
import MORadio from '@metsooutotec/modes-web-components/dist/react/checkbox';
import MORadioGroup from '@metsooutotec/modes-web-components/dist/react/checkbox-group';

const App = () => {
  const [errorText, setErrorText] = useState('This is an error message');
  const [successText, setSuccessText] = useState('This is a success message');

  return (
    <>
      <MORadioGroup
        label="Select an option"
        name="a"
        value="1"
        errorText={errorText}
      >
        <MORadio value="1">Option 1</MORadio>
        <MORadio value="2">Option 2</MORadio>
        <MORadio value="3">Option 3</MORadio>
      </MORadioGroup>
      <MORadioGroup
        label="Select an option"
        name="a"
        value="1"
        successText={successText}
      >
        <MORadio value="1">Option 1</MORadio>
        <MORadio value="2">Option 2</MORadio>
        <MORadio value="3">Option 3</MORadio>
      </MORadioGroup>
    </>
  );
};

Validation

Setting the required attribute to make selecting an option mandatory. If a value has not been selected, it will prevent the form from submitting and display an error message.

Option 1 Option 2 Option 3
Submit 
<form class="validation">
  <mo-radio-group label="Select an option" name="a" required>
    <mo-radio value="1">Option 1</mo-radio>
    <mo-radio value="2">Option 2</mo-radio>
    <mo-radio value="3">Option 3</mo-radio>
  </mo-radio-group>
  <br />
  <mo-button type="submit" variant="primary">Submit</mo-button>
</form>

<script type="module">
  const form = document.querySelector('.validation');

  // Handle form submit
  // Wait for controls to be defined before attaching form listeners
  await Promise.all([
    customElements.whenDefined('mo-button'),
    customElements.whenDefined('mo-radio'),
    customElements.whenDefined('mo-radio-group')
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
      alert('All fields are valid!');
    });
  });
</script>

import MOButton from '@metsooutotec/modes-web-components/dist/react/button';
import MOIcon from '@metsooutotec/modes-web-components/dist/react/icon';
import MORadio from '@metsooutotec/modes-web-components/dist/react/radio';
import MORadioGroup from '@metsooutotec/modes-web-components/dist/react/radio-group';
const App = () => {
  function handleSubmit(event) {
    event.preventDefault();
    alert('All fields are valid!');
  }

  return (
    <form class="custom-validity" onSubmit={handleSubmit}>
      <MORadioGroup label="Select an option" name="a" required>
        <MORadio value="1">
          Option 1
        </MORadio>
        <MORadio value="2">
          Option 2
        </MORadio>
        <MORadio value="3">
          Option 3
        </MORadio>
      </MORadioGroup>
      <br />
      <MOButton type="submit" variant="primary">
        Submit
      </MOButton>
    </form>
  );
};

Custom validity

Use the setCustomValidity() method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.

Not me Me neither Choose me
Submit 
<form class="custom-validity">
  <mo-radio-group label="Select an option" name="a" value="1">
    <mo-radio value="1">Not me</mo-radio>
    <mo-radio value="2">Me neither</mo-radio>
    <mo-radio value="3">Choose me</mo-radio>
  </mo-radio-group>
  <br />
  <mo-button type="submit" variant="primary">Submit</mo-button>
</form>

<script type="module">
  const form = document.querySelector('.custom-validity');
  const radioGroup = form.querySelector('mo-radio-group');
  const errorMessage = 'You must choose the last option';

  // Set initial validity as soon as the element is defined
  customElements.whenDefined('mo-radio-group').then(() => {
    radioGroup.setCustomValidity(errorMessage);
  });

  // Update validity when a selection is made
  form.addEventListener('mo-change', () => {
    const isValid = radioGroup.value === '3';
    radioGroup.setCustomValidity(isValid ? '' : errorMessage);
  });

  // Handle form submit
  // Wait for controls to be defined before attaching form listeners
  await Promise.all([
    customElements.whenDefined('mo-button'),
    customElements.whenDefined('mo-radio'),
    customElements.whenDefined('mo-radio-group')
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
      alert('All fields are valid!');
    });
  });
</script>

import { useEffect, useRef } from 'react';
import MOButton from '@metsooutotec/modes-web-components/dist/react/button';
import MOIcon from '@metsooutotec/modes-web-components/dist/react/icon';
import MORadio from '@metsooutotec/modes-web-components/dist/react/radio';
import MORadioGroup from '@metsooutotec/modes-web-components/dist/react/radio-group';
const App = () => {
  const radioGroup = useRef(null);
  const errorMessage = 'You must choose this option';

  function handleChange() {
    radioGroup.current.setCustomValidity(radioGroup.current.value === '3' ? '' : errorMessage);
  }

  function handleSubmit(event) {
    event.preventDefault();
    alert('All fields are valid!');
  }

  useEffect(() => {
    radio.current.setCustomValidity(errorMessage);
  }, []);

  return (
    <form class="custom-validity" onSubmit={handleSubmit}>
      <MORadioGroup ref={radioGroup} label="Select an option" name="a" value="1" onMOChange={handleChange}>
        <MORadio value="1">Not me</MORadio>
        <MORadio value="2">Me neither</MORadio>
        <MORadio value="3">Choose me</MORadio>
      </MORadioGroup>
      <br />
      <MOButton type="submit" variant="primary">
        Submit
      </MOButton>
    </form>
  );
};

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/radio-group/radio-group.js';

To import this component as a React component:

import MORadioGroup from '@metsooutotec/modes-web-components/dist/react/radio-group/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/radio-group/radio-group.js"></script>

Slots

Name Description
(default) The default slot where <mo-radio> or <mo-radio-button> elements are placed.
label The radio group’s label. Required for proper accessibility. Alternatively, you can use the label attribute.
help-text Text that describes how to use the radio group. Alternatively, you can use the help-text attribute.
error Error text to show when the radio group is in an error state. Alternatively, you can use the error-text attribute.
success Success text to show when the radio group is in a success state. Alternatively, you can use the success-text attribute.

Learn more about using slots.

Properties

Name Description Reflects Type Default
label The radio group’s label. Required for proper accessibility. If you need to display HTML, use the label slot instead. string ''
helpText
help-text 		The radio groups’s help text. If you need to display HTML, use the help-text slot instead. string ''
name The name of the radio group, submitted as a name/value pair with form data. string 'option'
value The current value of the radio group, submitted as a name/value pair with form data. string ''
size The radio group’s size. This size will be applied to all child radios and radio buttons. 'small' | 'medium' | 'large' 'medium'
form By default, form controls are associated with the nearest containing <form> element. This attribute allows you to place the form control outside of a form and associate it with the form that has this id. The form must be in the same document or shadow root for this to work. string ''
required Ensures a child radio is checked before allowing the containing form to submit. boolean false
error Renders the group in an error state boolean false
success Renders the group in a success state boolean false
errorText
error-text 		Error text to show in place of help text when group is invalid. string ''
successText
success-text 		Success text to show in place of help text when group is valid. string ''
hideFieldset
hide-fieldset 		Renders the radio group without the border and padding. boolean false
orientation The orientation of the button group. Use only with mo-radio-button’s as children. 'horizontal' | 'vertical' 'horizontal'
validity Gets the validity state object - -
validationMessage Gets the validation message - -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
mo-change onMoChange Emitted when the radio group’s selected value changes. -
mo-input onMoInput Emitted when the radio group receives user input. -
mo-invalid onMoInvalid Emitted when the form control has been checked for validity and its constraints aren’t satisfied. -

Learn more about events.

Methods

Name Description Arguments
checkValidity() Checks for validity but does not show a validation message. Returns true when valid and false when invalid. -
getForm() Gets the associated form, if one exists. -
reportValidity() Checks for validity and shows the browser’s validation message if the control is invalid. -
setCustomValidity() Sets a custom validation message. Pass an empty string to restore validity. message:

Learn more about methods.

Parts

Name Description
form-control The form control that wraps the label, input, and help text.
form-control-label The label’s wrapper.
form-control-input The input’s wrapper.
form-control-help-text The help text’s wrapper.
button-group The button group that wraps radio buttons.
button-group__base The button group’s base part.
label__base The radio group label.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.