Default Gray Amethyst

Switch

<mo-switch> | MOSwitch
Since 1.0 stable

Switches allow the user to toggle an option on or off.

Switch 
<mo-switch>
  <mo-icon name="ok" slot="suffix"></mo-icon>
  Switch
</mo-switch>

import { MOSwitch } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOSwitch>
    <MOIcon name="ok" slot="suffix"></MOIcon>
    Switch
  </MOSwitch>
);

Examples

Checked

Use the checked attribute to activate the switch.

Checked 
<mo-switch checked>
  <mo-icon name="ok" slot="suffix"></mo-icon>
  Checked
</mo-switch>

import { MOSwitch } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOSwitch checked>
    <MOIcon name="ok" slot="suffix"></MOIcon>
    Checked
  </MOSwitch>
);

Dark mode

A switch can be styled as a dark mode toggle by using the prefix and suffix slots to slot in the sun and moon-fill icons, respectively.

Dark mode toggle 
<mo-switch>
  <mo-icon name="sun" slot="prefix"></mo-icon>
  <mo-icon name="moon-fill" slot="suffix"></mo-icon>
  Dark mode toggle
</mo-switch>

import { MOSwitch } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOSwitch>
    <MOIcon name="sun" slot="prefix"></MOIcon>
    <MOIcon name="moon-fill" slot="suffix"></MOIcon>
    Dark mode toggle
  </MOSwitch>
);

Disabled

Use the disabled attribute to disable the switch.

Disabled 
<mo-switch disabled>Disabled</mo-switch>

import { MOSwitch } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOSwitch disabled>Disabled</MOSwitch>;

Custom size

Use the available custom properties to make the switch a different size.

<mo-switch style="--width: 80px; --height: 32px; --thumb-size: 26px;">
  <mo-icon name="ok" slot="suffix"></mo-icon>
</mo-switch>

import { MOSwitch } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOSwitch
    style={{
      '--width': '80px',
      '--height': '32px',
      '--thumb-size': '26px'
    }}
  >
    <MOIcon name="ok" slot="suffix"></MOIcon>
  </MOSwitch>
);

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

To import this component as a React component:

import MOSwitch from '@metsooutotec/modes-web-components/dist/react/switch/';

To import this component using a script tag:

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

Slots

Name Description
(default) The switch’s label.
prefix Used to add an icon or similar element to the unchecked state.
suffix Used to add an icon or similar element to the checked state.

Learn more about using slots.

Properties

Name Description Reflects Type Default
name The switch’s name attribute. string -
value The switch’s value attribute. string -
disabled Disables the switch. boolean false
required Makes the switch a required field. boolean false
checked Draws the switch in a checked state. boolean false
invalid This will be true when the control is in an invalid state. Validity is determined by the required prop. 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-change onMoChange Emitted when the control’s checked state changes. -
mo-focus onMoFocus Emitted when the control gains focus. -

Learn more about events.

Methods

Name Description Arguments
click() Simulates a click on the switch. -
focus() Sets focus on the switch. options: FocusOptions
blur() Removes focus from the switch. -
reportValidity() Checks for validity and shows the browser’s validation message if the control is invalid. -
setCustomValidity() Sets a custom validation message. If message is not empty, the field will be considered invalid. message: string

Learn more about methods.

Custom Properties

Name Description Default
--width The width of the switch.
--height The height of the switch.
--thumb-size The size of the thumb.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s internal wrapper.
control The switch control.
thumb The switch position indicator.
label The switch label.

Learn more about customizing CSS parts.