Default Gray Amethyst

Radio

<mo-radio> | MORadio
Since 1.0 stable

Radios allow the user to select a single option from a group.

Radios are designed to be used with radio groups. As such, all of the examples on this page utilize them to demonstrate their correct usage.

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

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

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

Examples

Disabled

Use the disabled attribute to disable a radio.

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

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

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

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/radio.js';

To import this component as a React component:

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

To import this component using a script tag:

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

Slots

Name Description
(default) The radio’s label.

Learn more about using slots.

Properties

Name Description Reflects Type Default
value The radio’s value. When selected, the radio group will receive this value. string -
size The radio’s size. When used inside a radio group, the size will be determined by the radio group’s size so this attribute can typically be omitted. 'small' | 'medium' | 'large' 'medium'
disabled Disables the radio. boolean false
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-blur onMoBlur Emitted when the control loses focus. -
mo-focus onMoFocus Emitted when the control gains focus. -

Learn more about events.

Parts

Name Description
base The component’s base wrapper.
control The circular container that wraps the radio’s checked state.
control--checked The radio control when the radio is checked.
checked-icon The checked icon, an <mo-icon> element.
label The container that wraps the radio’s label.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.