Radio

Les boutons radio permettent aux utilisateurs de choisir une option parmi un ensemble, en garantissant qu'une seule option est sélectionnée à la fois.

Utilisation

Importez les composants :

import 'mdui/components/radio-group.js';
import 'mdui/components/radio.js';

Importez les types TypeScript correspondants :

import type { RadioGroup } from 'mdui/components/radio-group.js';
import type { Radio } from 'mdui/components/radio.js';

Exemple d'utilisation :

Chinois

Anglais

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Chinois</mdui-radio>
  <mdui-radio value="english">Anglais</mdui-radio>
</mdui-radio-group>

Exemples

État sélectionné

La propriété value du groupe de boutons radio (<mdui-radio-group>) correspond à la value du bouton radio sélectionné. Mettez à jour cette propriété pour modifier la sélection.

Chinois

Anglais

<mdui-radio-group value="chinese">
  <mdui-radio value="chinese">Chinois</mdui-radio>
  <mdui-radio value="english">Anglais</mdui-radio>
</mdui-radio-group>

Source

Vous pouvez utiliser <mdui-radio> seul, et lire/modifier l'état via checked.

Bouton radio

<mdui-radio checked>Bouton radio</mdui-radio>

Source

État désactivé

Ajoutez disabled à <mdui-radio-group> pour désactiver tout le groupe de boutons radio.

Chinois

Anglais

<mdui-radio-group disabled>
  <mdui-radio value="chinese">Chinois</mdui-radio>
  <mdui-radio value="english">Anglais</mdui-radio>
</mdui-radio-group>

Source

Ajoutez disabled à un <mdui-radio> pour désactiver un bouton radio spécifique.

Chinois

Anglais

<mdui-radio-group>
  <mdui-radio value="chinese">Chinois</mdui-radio>
  <mdui-radio value="english" disabled>Anglais</mdui-radio>
</mdui-radio-group>

Source

Icône

Utilisez les attributs unchecked-icon et checked-icon pour définir les icônes Material Icons des états. Utilisez les slots correspondants pour des éléments personnalisés.

Chinois

Anglais

<mdui-radio-group value="chinese">
  <mdui-radio
    unchecked-icon="check_box_outline_blank"
    checked-icon="lock"
    value="chinese"
  >Chinois</mdui-radio>
  <mdui-radio value="english">
    <mdui-icon slot="unchecked-icon" name="check_box_outline_blank"></mdui-icon>
    <mdui-icon slot="checked-icon" name="lock"></mdui-icon>
    Anglais
  </mdui-radio>
</mdui-radio-group>

Source

`mdui-radio-group` API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`disabled`	`disabled`	`boolean`	`false`
Si ce composant est désactivé
`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 du groupe de boutons radio, qui sera envoyé avec les données du formulaire
`value`	`value`	`string`	`''`
Valeur actuellement sélectionnée dans le groupe de boutons radio, qui sera envoyée avec les données du formulaire
	`defaultValue`	`string`	`''`
Valeur sélectionnée par défaut. Lors de la réinitialisation du formulaire, il reviendra à cette valeur par défaut. Cette propriété ne peut être définie que par une propriété JavaScript.
`required`	`required`	`boolean`	`false`
Si l'un des boutons radio doit être sélectionné lors de la soumission du formulaire
	`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

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.

Événements

Nom
`change`
Se déclenche lorsque la valeur sélectionnée change
`input`
Se déclenche lorsque la valeur sélectionnée change
`invalid`
Se déclenche lorsque la validation du champ du formulaire échoue

Slots

Nom
Défaut
Éléments `<mdui-radio>`

`mdui-radio` API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`value`	`value`	`string`	`''`
Valeur actuelle du bouton radio
`disabled`	`disabled`	`boolean`	`false`
Si le bouton radio actuel est désactivé
`checked`	`checked`	`boolean`	`false`
Si le bouton radio actuel est sélectionné
`unchecked-icon`	`uncheckedIcon`	`string`	-
Nom de l'icône Material Icons pour l'état non sélectionné. Peut également être défini via `slot="unchecked-icon"`.
`checked-icon`	`checkedIcon`	`string`	-
Nom de l'icône Material Icons pour l'état sélectionné. Peut également être défini via `slot="checked-icon"`.
`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
`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 ce bouton radio est sélectionné

Slots

Nom
Défaut
Contenu textuel
`unchecked-icon`
Icône de l'état non sélectionné
`checked-icon`
Icône de l'état sélectionné

CSS Parts

Nom
`control`
Conteneur de l'Icône de gauche
`unchecked-icon`
Icône de l'état non sélectionné
`checked-icon`
Icône de l'état sélectionné
`label`
Contenu textuel

Chapitre précédent

NavigationRail

Chapitre suivant

RangeSlider