Radio Button
<mo-radio-button> | MORadioButton
Radios buttons allow the user to select a single option from a group using a button-like control.
<mo-radio-group label="Select an option" 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> );
Examples
Checked states
To set the initial value and checked state, use the value
attribute on the containing radio
group.
<mo-radio-group label="Select an option" 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> );
Disabled
Use the disabled
attribute to disable a radio button.
<mo-radio-group label="Select an option" name="a" value="1"> <mo-radio-button value="1">Option 1</mo-radio-button> <mo-radio-button value="2" disabled>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" disabled> Option 2 </MORadioButton> <MORadioButton value="3">Option 3</MORadioButton> </MORadioGroup> );
Sizes
Use the size
attribute to change a radio button’s size.
<mo-radio-group size="small" label="Select an option" 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> <br /> <mo-radio-group size="medium" label="Select an option" 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> <br /> <mo-radio-group size="large" label="Select an option" 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 size="small" 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> <br /> <MORadioGroup size="medium" 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> <br /> <MORadioGroup size="large" 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> );
Prefix and suffix icons
Use the prefix
and suffix
slots to add icons.
<mo-radio-group label="Select an option" name="a" value="1"> <mo-radio-button value="1"> <mo-icon slot="prefix" name="archive"></mo-icon> Option 1 </mo-radio-button> <mo-radio-button value="2"> <mo-icon slot="suffix" name="document"></mo-icon> Option 2 </mo-radio-button> <mo-radio-button value="3"> <mo-icon slot="prefix" name="settings"></mo-icon> <mo-icon slot="suffix" name="undo"></mo-icon> Option 3 </mo-radio-button> </mo-radio-group>
import MOIcon from '@metsooutotec/modes-web-components/dist/react/icon'; 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"> <MOIcon slot="prefix" name="archive" /> Option 1 </MORadioButton> <MORadioButton value="2"> <MOIcon slot="suffix" name="bag" /> Option 2 </MORadioButton> <MORadioButton value="3"> <MOIcon slot="prefix" name="gift" /> <MOIcon slot="suffix" name="cart" /> Option 3 </MORadioButton> </MORadioGroup> );
Buttons with icons
You can omit button labels and use icons instead. Make sure to set a label
attribute on each
icon so screen readers will announce each option correctly.
<mo-radio-group label="Select an option" name="a" value="undo"> <mo-radio-button value="settings"> <mo-icon name="settings" label="Settings"></mo-icon> </mo-radio-button> <mo-radio-button value="more"> <mo-icon name="more" label="More"></mo-icon> </mo-radio-button> <mo-radio-button value="undo"> <mo-icon name="undo" label="Undo"></mo-icon> </mo-radio-button> <mo-radio-button value="redo"> <mo-icon name="redo" label="Redo"></mo-icon> </mo-radio-button> <mo-radio-button value="settings"> <mo-icon name="settings" label="Settings"></mo-icon> </mo-radio-button> </mo-radio-group>
import MOIcon from '@metsooutotec/modes-web-components/dist/react/icon'; 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="undo"> <MORadioButton value="settings"> <MOIcon name="settings" label="Settings" /> </MORadioButton> <MORadioButton value="more"> <MOIcon name="more" label="More" /> </MORadioButton> <MORadioButton value="undo"> <MOIcon name="undo" label="Undo" /> </MORadioButton> <MORadioButton value="redo"> <MOIcon name="smile" label="Redo" /> </MORadioButton> <MORadioButton value="settings"> <MOIcon name="settings" label="Settings" /> </MORadioButton> </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.
To import this component using a bundler:
import '@metsooutotec/modes-web-components/dist/components/radio-button/radio-button.js';
To import this component as a React component:
import MORadioButton from '@metsooutotec/modes-web-components/dist/react/radio-button/';
To import this component using a script tag:
<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/radio-button/radio-button.js"></script>
Slots
Name | Description |
---|---|
(default) | The radio button’s label. |
prefix
|
A presentational prefix icon or similar element. |
suffix
|
A presentational suffix icon or similar element. |
Learn more about using slots.
Properties
Name | Description | Reflects | Type | Default |
---|---|---|---|---|
checked
|
The radio button’s checked state. This is exposed as an “internal” attribute so we can reflect it, making it easier to style in button groups. |
|
boolean
|
false
|
value
|
The radio’s value. When selected, the radio group will receive this value. |
string
|
- | |
disabled
|
Disables the radio button. |
|
boolean
|
false
|
size
|
The radio button’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'
|
pill
|
Draws a pill-style radio button with rounded edges. |
|
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 button loses focus. | - |
mo-focus |
onMoFocus |
Emitted when the button gains focus. | - |
Learn more about events.
Methods
Name | Description | Arguments |
---|---|---|
focus() |
Sets focus on the radio button. |
options: FocusOptions
|
blur() |
Removes focus from the radio button. | - |
Learn more about methods.
Parts
Name | Description |
---|---|
base |
The component’s base wrapper. |
button |
The internal <button> element. |
button--checked |
The internal button element when the radio button is checked. |
prefix |
The container that wraps the prefix. |
label |
The container that wraps the radio button’s label. |
suffix |
The container that wraps the suffix. |
Learn more about customizing CSS parts.