Checkbox

Les cases à cocher permettent aux utilisateurs de sélectionner une ou plusieurs options parmi un ensemble, ou d'activer/désactiver une option unique.

Utilisation

Importez le composant :

import 'mdui/components/checkbox.js';

Importez le type TypeScript correspondant :

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

Exemple d'utilisation :

Case à cocher

<mdui-checkbox>Case à cocher</mdui-checkbox>

Utilisez les attributs unchecked-icon, checked-icon et indeterminate-icon pour définir respectivement les icônes Material Icons des états non coché, coché et indéterminé. Vous pouvez également utiliser les slots correspondants.

Case à cocher

<mdui-checkbox
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Case à cocher</mdui-checkbox>

<mdui-checkbox
  indeterminate
  unchecked-icon="radio_button_unchecked"
  checked-icon="check_circle"
  indeterminate-icon="playlist_add_check_circle"
>Case à cocher</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>
  Case à cocher
</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>
  Case à cocher
</mdui-checkbox>

Source

API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`disabled`	`disabled`	`boolean`	`false`
Si le composant est désactivé
`checked`	`checked`	`boolean`	`false`
Si le composant est coché
	`defaultChecked`	`boolean`	`false`
État coché par défaut. Lors de la réinitialisation du formulaire, il reviendra à cet état. Cette propriété ne peut être définie que par une propriété JavaScript.
`indeterminate`	`indeterminate`	`boolean`	`false`
Si le composant est dans un état indéterminé
`required`	`required`	`boolean`	`false`
Si la case à cocher doit être cochée lors de la soumission du formulaire
`form`	`form`	`string`	-
Élément `<form>` associé. La valeur de cet attribut doit être l'`id` d'un élément `<form>` dans la même page. Si cet attribut n'est pas spécifié, l'élément doit être un enfant de l'élément `<form>`. Grâce à cet attribut, vous pouvez placer l'élément n'importe où sur la page, pas seulement en tant qu'enfant de l'élément `<form>`.
`name`	`name`	`string`	`''`
Nom de la case à cocher, qui sera envoyé avec les données du formulaire
`value`	`value`	`string`	`'on'`
Valeur de la case à cocher, qui sera envoyée avec les données du formulaire
`unchecked-icon`	`uncheckedIcon`	`string`	-
Nom de l'icône Material Icons pour l'état non coché. Peut également être défini via `slot="unchecked-icon"`.
`checked-icon`	`checkedIcon`	`string`	-
Nom de l'icône Material Icons pour l'état coché. Peut également être défini via `slot="checked-icon"`.
`indeterminate-icon`	`indeterminateIcon`	`string`	-
Nom de l'icône Material Icons pour l'état indéterminé. Peut également être défini via `slot="indeterminate-icon"`.
	`validity`	`ValidityState`	-
État de validation du formulaire, voir `ValidityState` pour plus de détails
	`validationMessage`	`string`	-
Si la validation du formulaire échoue, cet attribut contient un message d'erreur. Si la validation réussit, cet attribut est une chaîne vide
`autofocus`	`autofocus`	`boolean`	`false`
Si le focus doit être automatiquement obtenu après le chargement de la page
`tabindex`	`tabIndex`	`number`	-
Ordre de l'élément lors de la navigation au clavier avec la touche Tab

Méthodes

Nom	Paramètres	Valeur de retour
`checkValidity`		`boolean`
Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie `false` et déclenche l'événement `invalid` ; sinon, renvoie `true`.
`reportValidity`		`boolean`
Vérifie si le champ du formulaire est valide. Dans le cas contraire, renvoie `false` et déclenche l'événement `invalid` ; sinon, renvoie `true`. Si la validation échoue, un message d'erreur s'affiche également sur le composant.
`setCustomValidity`	`message: string`	`void`
Définit un texte d'erreur personnalisé. Tant que ce texte n'est pas vide, cela signifie que le champ n'est pas valide.
`click`		`void`
Simule un clic sur l'élément
`focus`	`options: FocusOptions` (Optionnel)	`void`
Place le focus sur l'élément. Vous pouvez passer un objet en paramètre, dont les propriétés incluent : `preventScroll` : Par défaut, après la prise de focus, la page défile pour amener l'élément à l'écran. Si vous ne souhaitez pas que la page défile, vous pouvez définir cette propriété sur `true`.
`blur`		`void`
Retire le focus de l'élément

Événements

Nom
`focus`
Se déclenche lorsque l'élément obtient le focus
`blur`
Se déclenche lorsque l'élément perd le focus
`change`
Se déclenche lorsque l'état de sélection change
`input`
Se déclenche lorsque l'état de sélection change
`invalid`
Se déclenche lorsque la validation du champ du formulaire échoue

Slots

Nom
Défaut
Texte de la case à cocher
`unchecked-icon`
Icône à l'état non coché
`checked-icon`
Icône à l'état coché
`indeterminate-icon`
Icône à l'état indéterminé

CSS Parts

Nom
`control`
Conteneur de l'Icône de gauche
`unchecked-icon`
Icône à l'état non coché
`checked-icon`
Icône à l'état coché
`indeterminate-icon`
Icône à l'état indéterminé
`label`
Texte de la case à cocher

Chapitre précédent

Card

Chapitre suivant

Chip

Checkbox

Utilisation

Exemples

État coché

État désactivé

État indéterminé

Icône

API

Propriétés

Méthodes

Événements

Slots

CSS Parts