Default Gray Amethyst

Toggle Button

<mo-toggle-button> | MOToggleButton
Since 2.3 deprecated

Toggle buttons allow the user to select one option from a set.

On Maybe Off 
<mo-toggle-button>
  <mo-button>On</mo-button>
  <mo-button>Maybe</mo-button>
  <mo-button>Off</mo-button>
</mo-toggle-button>

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

const App = () => (
  <MOToggleButton>
    <MOButton>On</MOButton>
    <MOButton>Maybe</MOButton>
    <MOButton>Off</MOButton>
  </MOToggleButton>
);

Examples

Vertical

You can align the buttons vertically by enabling the vertical attribute.

8 h 24 h 7 d 30 d 
<mo-toggle-button vertical>
  <mo-button>8 h</mo-button>
  <mo-button>24 h</mo-button>
  <mo-button>7 d</mo-button>
  <mo-button>30 d</mo-button>
</mo-toggle-button>

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

const App = () => (
  <MOToggleButton vertical>
    <MOButton>On</MOButton>
    <MOButton>Maybe</MOButton>
    <MOButton>Off</MOButton>
  </MOToggleButton>
);

Label

You can add a label in front of the toggle button group with the label attribute.

10 20 30 
<mo-toggle-button label="Select page size">
  <mo-button>10</mo-button>
  <mo-button>20</mo-button>
  <mo-button>30</mo-button>
</mo-toggle-button>

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

const App = () => (
  <MOToggleButton label="Select page size">
    <MOButton>10</MOButton>
    <MOButton>20</MOButton>
    <MOButton>30</MOButton>
  </MOToggleButton>
);

Get active button

You can get a reference to the active button with getActiveButton(), or the text content of the currently selected button using selectedValue.

On Maybe Off 
no active button
Currently active (clone):
<mo-toggle-button id="get-active">
  <mo-button>On</mo-button>
  <mo-button>Maybe</mo-button>
  <mo-button>Off</mo-button>
</mo-toggle-button>
<pre id="active-btn-pre">no active button</pre>
<div id="active-btn">Currently active (clone):</div>

<script>
  const toggleBtn = document.querySelector('#get-active');
  const pre = document.querySelector('#active-btn-pre');
  const div = document.querySelector('#active-btn');
  toggleBtn.addEventListener('mo-change', e => {
    pre.innerHTML = `Active: ${e.detail.selectedValue}`;
    div.innerHTML = 'Currently active (clone):  ';
    if (e.target.getActiveButton()) {
      const btnCopy = e.target.getActiveButton().cloneNode(true);
      div.appendChild(btnCopy);
    }
  });
</script>

import { MOToggleButton, MOButton } from '@metsooutotec/modes-web-components/dist/react';
import { useRef } from 'react';

const preRef = useRef(null);

const handleChange = e => {
  preRef.innerHTML = `Active: ${e.detail.selectedValue}`;
};

const App = () => (
  <>
    <MOToggleButton onMoChange={e => handleChange(e)}>
      <MOButton>On</MOButton>
      <MOButton>Maybe</MOButton>
      <MOButton>Off</MOButton>
    </MOToggleButton>
    <pre ref={preRef}>no active button</pre>
  </>
);

Set active button

You can set the current active button programmatically by modifying the selectedValue attribute.


On Maybe Off 
<mo-input
  label="Select value"
  help-text="Values are case insensitive."
  placeholder="Type in the value you would like to select."
  id="set-active-input"
></mo-input>
<br />
<mo-toggle-button id="set-active-toggle">
  <mo-button>On</mo-button>
  <mo-button>Maybe</mo-button>
  <mo-button>Off</mo-button>
</mo-toggle-button>

<script>
  const toggleBtn = document.querySelector('#set-active-toggle');
  const input = document.querySelector('#set-active-input');
  input.addEventListener('mo-input', e => {
    toggleBtn.selectedValue = e.target.value;
  });
</script>

import { MOToggleButton, MOButton, MOInput } from '@metsooutotec/modes-web-components/dist/react';
import { useRef } from 'react';

const toggleRef = useRef(null);

const handleChange = e => {
  toggleRef.selectedValue = e.target.value;
};

const App = () => (
  <>
    <MOInput
      label="Select value"
      helpText="Values are case insensitive."
      placeholder="Type in the value you would like to select."
      onMoInput={e => handleChange(e)}
    ></MOInput>
    <br />
    <MOToggleButton ref={toggleRef}>
      <MOButton>On</MOButton>
      <MOButton>Maybe</MOButton>
      <MOButton>Off</MOButton>
    </MOToggleButton>
  </>
);

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

To import this component as a React component:

import MOToggleButton from '@metsooutotec/modes-web-components/dist/react/toggle-button/';

To import this component using a script tag:

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

Slots

Name Description
(default) The default slot.
label The default slot.

Learn more about using slots.

Properties

Name Description Reflects Type Default
buttons Query all child mo-button elements. MOButton[] -
label The toggle button’s label. Alternatively, you can use the label slot. string ''
selectedValue The text value of the currently selected button. string ''
vertical Draws the toggle button in a vertical orientation. 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-change onMoChange Emitted when a button is selected. -

Learn more about events.

Parts

Name Description
base The component’s internal wrapper.
label The component’s label.

Learn more about customizing CSS parts.