CheckboxCheckbox

El componente Checkbox permite seleccionar una o varias opciones de un conjunto, o alternar el estado de una sola opción.

Uso

Importa el componente cuando lo necesites:

import 'mdui/components/checkbox.js';

Importa el tipo TypeScript cuando lo necesites:

import type { Checkbox } from 'mdui/components/checkbox.js';

Uso:

Checkbox

<mdui-checkbox>Checkbox</mdui-checkbox>

Los atributos unchecked-icon, checked-icon e indeterminate-icon define los iconos de Material Icons para los estados no seleccionado, seleccionado e indeterminado respectivamente. También puedes configurarlos mediante los slots unchecked-icon, checked-icon e indeterminate-icon.

Checkbox

<mdui-checkbox
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Checkbox</mdui-checkbox>

<mdui-checkbox
  indeterminate
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Checkbox</mdui-checkbox>

<br/>

<mdui-checkbox>
  <mdui-icon slot="unchecked-icon" name="radio_button_unchecked"></mdui-icon>
  <mdui-icon slot="checked-icon" name="check_circle"></mdui-icon>
  <mdui-icon slot="indeterminate-icon" name="playlist_add_check_circle"></mdui-icon>
  Checkbox
</mdui-checkbox>

<mdui-checkbox indeterminate>
  <mdui-icon slot="unchecked-icon" name="radio_button_unchecked"></mdui-icon>
  <mdui-icon slot="checked-icon" name="check_circle"></mdui-icon>
  <mdui-icon slot="indeterminate-icon" name="playlist_add_check_circle"></mdui-icon>
  Checkbox
</mdui-checkbox>

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.
`indeterminate`	`indeterminate`	`boolean`	`false`
Indica si se encuentra en estado indeterminado.
`required`	`required`	`boolean`	`false`
Indica si es obligatorio marcar este checkbox 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 checkbox, que se enviará con los datos del formulario.
`value`	`value`	`string`	`'on'`
Valor del checkbox, que se enviará con los datos del formulario.
`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"`.
`indeterminate-icon`	`indeterminateIcon`	`string`	-
Nombre del icono de Material Icons para el estado indeterminado. También se puede establecer mediante `slot="indeterminate-icon"`.
	`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
(predeterminado)
Texto del checkbox.
`unchecked-icon`
Icono en estado no seleccionado.
`checked-icon`
Icono en estado seleccionado.
`indeterminate-icon`
Icono en estado indeterminado.

CSS Parts

Nombre
`control`
Contenedor del icono izquierdo.
`unchecked-icon`
Icono en estado no seleccionado.
`checked-icon`
Icono en estado seleccionado.
`indeterminate-icon`
Icono en estado indeterminado.
`label`
Texto del checkbox.

Capítulo anterior

Card Tarjeta

Capítulo siguiente

Chip Chip

CheckboxCheckbox

Uso

Ejemplos

Estado seleccionado

Estado deshabilitado

Estado indeterminado

Icono

API

Propiedades

Métodos

Eventos

Slots

CSS Parts