SwitchSwitch

El componente Switch se usa para alternar el estado de encendido o apagado de una sola opción, permitiendo al usuario ajustar la configuración fácilmente mediante una interacción intuitiva.

Uso

Importa el componente cuando lo necesites:

import 'mdui/components/switch.js';

Importa el tipo TypeScript cuando lo necesites:

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

Uso:

<mdui-switch></mdui-switch>

El atributo unchecked-icon define el icono de Material Icons para el estado no seleccionado, y checked-icon define el icono del estado seleccionado. También puedes personalizar los elementos del icono en los estados no seleccionado y seleccionado mediante los slots unchecked-icon y checked-icon.

<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>

Fuente

API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
`disabled`	`disabled`	`boolean`	`false`
Indica si está deshabilitado.
`checked`	`checked`	`boolean`	`false`
Indica si está seleccionado.
	`defaultChecked`	`boolean`	`false`
Estado de selección por defecto. Al restablecer el formulario, se restaurará a este estado. Esta propiedad solo se puede establecer mediante una propiedad de JavaScript.
`unchecked-icon`	`uncheckedIcon`	`string`	-
Nombre del icono de Material Icons para el estado no seleccionado. También se puede establecer mediante `slot="unchecked-icon"`.
`checked-icon`	`checkedIcon`	`string`	-
Nombre del icono de Material Icons para el estado seleccionado. También se puede establecer mediante `slot="checked-icon"`. Por defecto es el icono `check`. Se puede pasar una cadena vacía para eliminar el icono predeterminado.
`required`	`required`	`boolean`	`false`
Indica si es obligatorio marcar este Switch al enviar el formulario.
`form`	`form`	`string`	-
Elemento `<form>` asociado. El valor de esta propiedad debe ser el `id` de un elemento `<form>` en la misma página. Si no se especifica esta propiedad, el elemento debe ser hijo de un elemento `<form>`. Con esta propiedad, puedes colocar el elemento en cualquier lugar de la página, no solo como hijo de un elemento `<form>`.
`name`	`name`	`string`	`''`
Nombre del Switch, que se enviará con los datos del formulario.
`value`	`value`	`string`	`'on'`
Valor del Switch, que se enviará con los datos del formulario.
	`validity`	`ValidityState`	-
Objeto de estado de validación del formulario, véase `ValidityState`.
	`validationMessage`	`string`	-
Si falla la validación del formulario, esta propiedad contendrá un mensaje informativo. Si la validación es correcta, esta propiedad será una cadena vacía.
`autofocus`	`autofocus`	`boolean`	`false`
Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
`tabindex`	`tabIndex`	`number`	-
Orden del elemento al navegar con la tecla Tab.

Métodos

Nombre	Parámetros	Valor de retorno
`checkValidity`		`boolean`
Comprueba si el campo del formulario pasa la validación. Si falla, devuelve `false` y dispara el evento `invalid`; si la pasa, devuelve `true`.
`reportValidity`		`boolean`
Comprueba si el campo del formulario pasa la validación. Si falla, devuelve `false` y dispara el evento `invalid`; si la pasa, devuelve `true`. Si la validación falla, también muestra un mensaje de error en el componente.
`setCustomValidity`	`message: string`	`void`
Establece un mensaje de error personalizado. Si este mensaje no está vacío, indica que el campo no ha pasado la validación.
`click`		`void`
Simula un clic del ratón en el elemento.
`focus`	`options: FocusOptions` (Opcional)	`void`
Establece el foco en el elemento actual. Puede pasarse un objeto como parámetro con las siguientes propiedades: `preventScroll`: Por defecto, cuando el elemento recibe el foco, la página se desplaza hasta mostrarlo. Si no quiere que la página se desplace, defina esta propiedad como `true`.
`blur`		`void`
Quita el foco del elemento actual.

Eventos

Nombre
`focus`
Se dispara cuando recibe el foco.
`blur`
Se dispara cuando pierde el foco.
`change`
Se dispara cuando cambia el estado de selección.
`input`
Se dispara cuando cambia el estado de selección.
`invalid`
Se dispara cuando falla la validación del campo del formulario.

Slots

Nombre
`unchecked-icon`
Elemento en estado no seleccionado.
`checked-icon`
Elemento en estado seleccionado.

CSS Parts

Nombre
`track`
Pista.
`thumb`
Contenedor del icono.
`unchecked-icon`
Icono en estado no seleccionado.
`checked-icon`
Icono en estado seleccionado.

CSS Custom Properties

Nombre
`--shape-corner`
Tamaño de la esquina redondeada de la pista del componente. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.
`--shape-corner-thumb`
Tamaño de la esquina redondeada del contenedor del icono del componente. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.

Capítulo anterior

Snackbar Snackbar

Capítulo siguiente

Tabs Tab

SwitchSwitch

Uso

Ejemplos

Estado seleccionado

Estado deshabilitado

Icono