Checkbox

Le checkbox consentono agli utenti di selezionare una o più opzioni da un insieme. Ogni checkbox può passare dallo stato selezionato a quello deselezionato.

Utilizzo

Importa il componente:

import 'mdui/components/checkbox.js';

Importa il tipo TypeScript:

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

Esempio:

Checkbox

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

Usa gli attributi unchecked-icon, checked-icon e indeterminate-icon per impostare le Icone Material per la checkbox rispettivamente negli stati deselezionato, selezionato e indeterminato. Oppure, usa gli slot corrispondenti per impostare le icone.

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>

Sorgente

API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`disabled`	`disabled`	`boolean`	`false`
Se il componente è disabilitato
`checked`	`checked`	`boolean`	`false`
Se il componente è selezionato
	`defaultChecked`	`boolean`	`false`
Stato selezionato predefinito. Quando si reimposta il modulo, verrà ripristinato a questo stato. Questa proprietà può essere impostata solo tramite JavaScript.
`indeterminate`	`indeterminate`	`boolean`	`false`
Se il componente è indeterminato
`required`	`required`	`boolean`	`false`
Se è obbligatorio selezionare questa casella di controllo al momento dell'invio del modulo
`form`	`form`	`string`	-
Elemento `<form>` associato. Il valore di questo attributo deve essere l'`id` di un elemento `<form>` nella stessa pagina. Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento `<form>`. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento `<form>`.
`name`	`name`	`string`	`''`
Nome della casella di controllo, inviato insieme ai dati del modulo
`value`	`value`	`string`	`'on'`
Valore della casella di controllo, inviato insieme ai dati del modulo
`unchecked-icon`	`uncheckedIcon`	`string`	-
Nome dell'icona Material per lo stato non selezionato. Può essere specificato anche tramite `slot="unchecked-icon"`.
`checked-icon`	`checkedIcon`	`string`	-
Nome dell'icona Material per lo stato selezionato. Può essere specificato anche tramite `slot="checked-icon"`.
`indeterminate-icon`	`indeterminateIcon`	`string`	-
Nome dell'icona Material per lo stato indeterminato. Può essere specificato anche tramite `slot="indeterminate-icon"`.
	`validity`	`ValidityState`	-
Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a `ValidityState`
	`validationMessage`	`string`	-
Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota
`autofocus`	`autofocus`	`boolean`	`false`
Se deve ricevere automaticamente il focus al caricamento della pagina
`tabindex`	`tabIndex`	`number`	-
Ordine di tabulazione dell'elemento

Metodi

Nome	Parametri	Restituisce
`checkValidity`		`boolean`
Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce `false` e attiva l'evento `invalid`; in caso affermativo, restituisce `true`
`reportValidity`		`boolean`
Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce `false` e attiva l'evento `invalid`; in caso affermativo, restituisce `true`. Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
`setCustomValidity`	`message: string`	`void`
Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida
`click`		`void`
Simula un clic del mouse sull'elemento
`focus`	`options: FocusOptions` (Opzionale)	`void`
Imposta il focus sull'elemento corrente. È possibile passare un oggetto come parametro, le cui proprietà includono: `preventScroll`: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su `true`.
`blur`		`void`
Rimuove il focus dall'elemento corrente

Eventi

Nome
`focus`
Attivato quando si riceve il focus
`blur`
Attivato quando si perde il focus
`change`
Attivato quando lo stato di selezione cambia
`input`
Attivato quando lo stato di selezione cambia
`invalid`
Attivato quando la convalida del campo del modulo non viene superata

Slots

Nome
(predefinito)
Testo della casella di controllo
`unchecked-icon`
Icona nello stato non selezionato
`checked-icon`
Icona nello stato selezionato
`indeterminate-icon`
Icona nello stato indeterminato

CSS Parts

Nome
`control`
Contenitore dell'icona a sinistra
`unchecked-icon`
Icona nello stato non selezionato
`checked-icon`
Icona nello stato selezionato
`indeterminate-icon`
Icona nello stato indeterminato
`label`
Testo della casella di controllo

Capitolo precedente

Card

Capitolo successivo

Chip

Checkbox

Utilizzo

Esempi

Stato Selezionato

Stato Disabilitato

Stato Indeterminato

Icone

API

Proprietà

Metodi

Eventi

Slots

CSS Parts