Switch

The Switch component is utilized to toggle the state of a single setting between on and 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>

The unchecked-icon and checked-icon attributes can be used to set the Material Icons for the unchecked and checked states, respectively. Alternatively, the unchecked-icon and checked-icon slots can be used 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>

Code

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. This can only be set via a JavaScript property.
`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; an empty string removes the default icon.
`required`	`required`	`boolean`	`false`
The switch must be checked when submitting the form.
`form`	`form`	`string`	-
Associates the switch with a `<form>` element. The value should be the `id` of a `<form>` in the same document. If not set, the switch is associated with its parent `<form>`, if any. This attribute allows switch elements to be associated with `<form>`s anywhere in the document, not just inside a `<form>`.
`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`	-
The element's validation message. This is empty if the element meets its constraints.
`autofocus`	`autofocus`	`boolean`	`false`
Determines if the element should be focused when the page loads.
`tabindex`	`tabIndex`	`number`	-
Specifies the order in which the element receives focus when navigating with the Tab key.

Methods

Name	Parameters	Returns
`checkValidity`		`boolean`
Checks the validity of the form field. If it's invalid, it triggers an `invalid` event and returns `false`. If it's valid, it returns `true`.
`reportValidity`		`boolean`
Checks the validity of the form field. If it's invalid, it triggers an `invalid` event, returns `false`, and displays a validation message. If it's valid, it returns `true`.
`setCustomValidity`	`message: string`	`void`
Sets a custom error message. If the text is non-empty, it indicates that the field is invalid.
`click`		`void`
Simulates a mouse click on the element.
`focus`	`options: FocusOptions` (Optional)	`void`
Sets focus on the element. An optional parameter can be an object with 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 doesn't 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`
Icon container.
`unchecked-icon`
Icon for the unchecked state.
`checked-icon`
Icon for the checked state.

CSS Custom Properties

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

Radio

Up Next

Slider

Switch

Usage

Examples

Checked State

Disabled State

Icons