# Switch Component The Switch component toggles a single setting on or off. ## Usage {#usage} Import the component: ```js import 'mdui/components/switch.js'; ``` Import the TypeScript type: ```ts import type { Switch } from 'mdui/components/switch.js'; ``` Example: ```html ``` ## Examples {#examples} ### Checked State {#example-checked} The `checked` attribute indicates whether the switch is on or off. Add the `checked` attribute to turn it on by default. ```html ``` ### Disabled State {#example-disabled} Use the `disabled` attribute to disable the switch. ```html ``` ### Icons {#example-icon} 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. ```html

``` ## mdui-switch API ### Properties

Attribute	Property	Reflect	Type	Default	Description
disabled	disabled	true	boolean	false	Disables the switch.
checked	checked	true	boolean	false	Sets the switch to the checked state.
undefined	defaultChecked	false	boolean	false	The default checked state. The switch resets to this state when the form is reset. JavaScript only.
unchecked-icon	uncheckedIcon	true	string		The Material Icons name for the unchecked state. Alternatively, use `slot="unchecked-icon"`.
checked-icon	checkedIcon	true	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	true	boolean	false	The switch must be checked before the form is submitted.
form	form	true	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	true	string	''	The name of the switch, which is submitted with form data.
value	value	true	string	'on'	The value of the switch, which is submitted with form data.
undefined	validity	false	ValidityState		A `ValidityState` object that represents the element's validity states.
undefined	validationMessage	false	string		Validation message. Empty string when valid.
autofocus	autofocus	true	boolean	false	Whether the element is focused when the page loads.
tabindex	tabIndex	false	number		The element's tab order when navigating with the Tab key.

### Methods

Name	Description
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): 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	Description
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	Description
unchecked-icon	Element for the unchecked state.
checked-icon	Element for the checked state.

### CSS Parts

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

### CSS Custom Properties

Name	Description
--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.