Switch

The Switch component toggles a single setting on or off.

Usage

Import the component:

import 'mdui/components/switch.js';

Import the TypeScript type:

import type { Switch } from 'mdui/components/switch.js';

Example:

<mdui-switch></mdui-switch>

Use the unchecked-icon and checked-icon attributes to set the Material Icons for the unchecked and checked states, respectively. Alternatively, use the unchecked-icon and checked-icon slots to set the icons for the unchecked and checked states.

<mdui-switch unchecked-icon="remove_moderator" checked-icon="verified_user"></mdui-switch>
<mdui-switch>
  <mdui-icon slot="unchecked-icon" name="remove_moderator"></mdui-icon>
  <mdui-icon slot="checked-icon" name="verified_user"></mdui-icon>
</mdui-switch>

Source

API

Properties

Attribute	Property	Type	Default
`disabled`	`disabled`	`boolean`	`false`
Disables the switch.
`checked`	`checked`	`boolean`	`false`
Sets the switch to the checked state.
	`defaultChecked`	`boolean`	`false`
The default checked state. The switch resets to this state when the form is reset. JavaScript only.
`unchecked-icon`	`uncheckedIcon`	`string`	-
The Material Icons name for the unchecked state. Alternatively, use `slot="unchecked-icon"`.
`checked-icon`	`checkedIcon`	`string`	-
The Material Icons name for the checked state. Alternatively, use `slot="checked-icon"`. Defaults to the `check` icon; setting an empty string removes the default icon.
`required`	`required`	`boolean`	`false`
The switch must be checked before the form is submitted.
`form`	`form`	`string`	-
Associates the switch with a `<form>` element. Set this to the `id` of a `<form>` in the same document. If omitted, the switch uses its parent `<form>`, if any. This lets the switch work with any form in the document, not just the one it is nested in.
`name`	`name`	`string`	`''`
The name of the switch, which is submitted with form data.
`value`	`value`	`string`	`'on'`
The value of the switch, which is submitted with form data.
	`validity`	`ValidityState`	-
A `ValidityState` object that represents the element's validity states.
	`validationMessage`	`string`	-
Validation message. Empty string when valid.
`autofocus`	`autofocus`	`boolean`	`false`
Whether the element is focused when the page loads.
`tabindex`	`tabIndex`	`number`	-
The element's tab order when navigating with the Tab key.

Methods

Name	Parameters	Returns
`checkValidity`		`boolean`
Checks the validity of the form field. If it is invalid, it triggers an `invalid` event and returns `false`. If valid, it returns `true`.
`reportValidity`		`boolean`
Checks the validity of the form field. If it is invalid, it triggers an `invalid` event, returns `false`, and displays a validation message. If valid, it returns `true`.
`setCustomValidity`	`message: string`	`void`
Sets a custom error message. If the message is non-empty, the field is considered invalid.
`click`		`void`
Simulates a mouse click on the element.
`focus`	`options: FocusOptions` (Optional)	`void`
Sets focus on the element. An optional object parameter may include a `preventScroll` property. If `preventScroll` is set to `true`, the page will not scroll to bring the focused element into view.
`blur`		`void`
Removes focus from the element.

Events

Name
`focus`
Emitted when the switch gains focus.
`blur`
Emitted when the switch loses focus.
`change`
Emitted when the checked state changes.
`input`
Emitted when the checked state changes.
`invalid`
Emitted when the form control's validity is checked and it does not meet the constraints.

Slots

Name
`unchecked-icon`
Element for the unchecked state.
`checked-icon`
Element for the checked state.

CSS Parts

Name
`track`
Track.
`thumb`
Thumb.
`unchecked-icon`
Icon for the unchecked state.
`checked-icon`
Icon for the checked state.

CSS Custom Properties

Name
`--shape-corner`
The corner radius of the track. You can use a specific pixel value, but it is recommended to reference design tokens.
`--shape-corner-thumb`
The corner radius of the icon container. You can use a specific pixel value, but it is recommended to reference design tokens.

Snackbar

Tabs

Switch

Usage

Examples

Checked State

Disabled State

Icons