Select

Le composant Select propose une liste déroulante d'options pour une sélection rapide.

Cette page traite principalement de l'utilisation de <mdui-select>. Pour l'utilisation des éléments de menu, consultez <mdui-menu-item>.

Utilisation

Importez les composants selon vos besoins :

import 'mdui/components/select.js';
import 'mdui/components/menu-item.js';

Importez les types TypeScript correspondants :

import type { Select } from 'mdui/components/select.js';
import type { MenuItem } from 'mdui/components/menu-item.js';

Exemple d'utilisation :

Élément 1

Élément 2

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Élément 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Élément 2</mdui-menu-item>
</mdui-select>

Exemples

Variante

Définissez la variante à l'aide de l'attribut variant.

Élément 1

Élément 2

Élément 1

Élément 2

<mdui-select variant="filled" value="item-1">
  <mdui-menu-item value="item-1">Élément 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Élément 2</mdui-menu-item>
</mdui-select>

<mdui-select variant="outlined" value="item-1">
  <mdui-menu-item value="item-1">Élément 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Élément 2</mdui-menu-item>
</mdui-select>

Source

Sélection multiple

Par défaut, la sélection est unique. La value de <mdui-select> correspond à la value de l'option sélectionnée.

Pour permettre la sélection multiple, ajoutez l'attribut multiple. La value devient alors un tableau contenant les value des options sélectionnées.

Remarque : en mode multiple, la value est un tableau et ne peut être lue ou modifiée que via la propriété JavaScript.

Élément 1

Élément 2

Élément 3

<mdui-select multiple class="example-multiple">
  <mdui-menu-item value="item-1">Élément 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Élément 2</mdui-menu-item>
  <mdui-menu-item value="item-3">Élément 3</mdui-menu-item>
</mdui-select>

<script>
  // Sélectionner item-1 et item-2 par défaut
  const select = document.querySelector(".example-multiple");
  select.value = ["item-1", "item-2"];
</script>

Source

Texte d'aide

Utilisez l'attribut label pour afficher un texte au-dessus du Select.

Élément 1

Élément 2

<mdui-select label="Select" value="item-1">
  <mdui-menu-item value="item-1">Élément 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Élément 2</mdui-menu-item>
</mdui-select>

Source

Utilisez placeholder pour afficher un exemple de saisie.

Élément 1

Élément 2

<mdui-select placeholder="Saisie">
  <mdui-menu-item value="item-1">Élément 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Élément 2</mdui-menu-item>
</mdui-select>

Source

Utilisez helper ou le slot helper pour afficher un message d'aide en dessous.

Élément 1

Élément 2

Élément 1

Élément 2

Message d'aide

<mdui-select helper="Message d'aide">
  <mdui-menu-item value="item-1">Élément 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Élément 2</mdui-menu-item>
</mdui-select>

<mdui-select>
  <mdui-menu-item value="item-1">Élément 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Élément 2</mdui-menu-item>
  <span slot="helper" style="color: blue">Message d'aide</span>
</mdui-select>

Source

Lecture seule

Ajoutez l'attribut readonly pour rendre le champ en lecture seule.

Élément 1

Élément 2

<mdui-select readonly value="item-1">
  <mdui-menu-item value="item-1">Élément 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Élément 2</mdui-menu-item>
</mdui-select>

Source

Désactivé

Ajoutez l'attribut disabled pour désactiver le composant.

Élément 1

Élément 2

<mdui-select disabled value="item-1">
  <mdui-menu-item value="item-1">Élément 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Élément 2</mdui-menu-item>
</mdui-select>

Source

Effaçable

Ajoutez l'attribut clearable pour afficher un bouton d'effacement lorsqu'une valeur est sélectionnée.

Élément 1

Élément 2

<mdui-select clearable value="item-1">
  <mdui-menu-item value="item-1">Élément 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Élément 2</mdui-menu-item>
</mdui-select>

Source

Personnalisez le bouton à l'aide du slot clear.

Élément 1

Élément 2

<mdui-select clearable value="item-1">
  <mdui-menu-item value="item-1">Élément 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Élément 2</mdui-menu-item>
  <mdui-icon slot="clear" name="delete"></mdui-icon>
</mdui-select>

Source

Position du menu déroulant

Utilisez l'attribut placement pour définir la position du menu déroulant.

Élément 1

Élément 2

<mdui-select placement="top" value="item-1">
  <mdui-menu-item value="item-1">Élément 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Élément 2</mdui-menu-item>
</mdui-select>

Source

Alignement du texte à droite

Ajoutez l'attribut end-aligned pour aligner le texte à droite.

Élément 1

Élément 2

<mdui-select end-aligned value="item-1">
  <mdui-menu-item value="item-1">Élément 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Élément 2</mdui-menu-item>
</mdui-select>

Source

Texte et icônes avant/après

Utilisez les attributs icon et end-icon pour ajouter des icônes Material Icons. Utilisez les slots correspondants pour des éléments personnalisés.

Élément 1

Élément 2

Élément 1

Élément 2

<mdui-select value="item-1" icon="search" end-icon="mic">
  <mdui-menu-item value="item-1">Élément 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Élément 2</mdui-menu-item>
</mdui-select>

<br/><br/>

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Élément 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Élément 2</mdui-menu-item>
  <mdui-button-icon slot="icon" icon="search"></mdui-button-icon>
  <mdui-button-icon slot="end-icon" icon="mic"></mdui-button-icon>
</mdui-select>

Source

Utilisez les attributs prefix et suffix (ou les slots correspondants) pour ajouter du texte avant ou après. Ce texte ne s'affiche que lorsque le Select a le focus ou contient une valeur.

Élément 1

Élément 2

Élément 1

Élément 2

$ /100

<mdui-select value="item-1" prefix="$" suffix="/100">
  <mdui-menu-item value="item-1">Élément 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Élément 2</mdui-menu-item>
</mdui-select>

<br/><br/>

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Élément 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Élément 2</mdui-menu-item>
  <span slot="prefix" style="color: blue">$</span>
  <span slot="suffix" style="color: blue">/100</span>
</mdui-select>

Source

API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
Style du Select. Les valeurs possibles incluent : `filled` : Select avec couleur de fond, effet visuel fort `outlined` : Select avec bordure, effet visuel plus faible
`multiple`	`multiple`	`boolean`	`false`
Si la sélection multiple est prise en charge
`name`	`name`	`string`	`''`
Nom du Select, qui sera envoyé avec les données du formulaire
`value`	`value`	`string \| string[]`	`''`
Valeur du Select, qui sera envoyée avec les données du formulaire. Si l'attribut `multiple` n'est pas spécifié, cette valeur est une chaîne de caractères ; si l'attribut `multiple` est spécifié, cette valeur est un tableau de chaînes de caractères. L'attribut HTML ne peut définir qu'une valeur de chaîne ; si vous devez définir une valeur de tableau, définissez-la via la propriété JavaScript.
	`defaultValue`	`string \| 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.
`label`	`label`	`string`	-
Texte de l'étiquette
`placeholder`	`placeholder`	`string`	-
Texte de l'espace réservé
`helper`	`helper`	`string`	-
Texte d'aide en bas du Select. Peut également être défini via `slot="helper"`.
`clearable`	`clearable`	`boolean`	`false`
Si le Select peut être vidé
`clear-icon`	`clearIcon`	`string`	-
Lorsque le Select peut être vidé, nom de l'icône Material Icons pour le bouton d'effacement affiché à droite. Peut également être défini via `slot="clear-icon"`.
`placement`	`placement`	`'auto' \| 'bottom' \| 'top'`	`'auto'`
Position du Select. Les valeurs possibles incluent : `auto` : Position déterminée automatiquement `bottom` : En bas `top` : En haut
`end-aligned`	`endAligned`	`boolean`	`false`
Si le texte doit être aligné à droite
`prefix`	`prefix`	`string`	-
Texte de préfixe du Select. N'est affiché qu'à l'état de focus ou lorsque le Select a une valeur. Peut également être défini via `slot="prefix"`.
`suffix`	`suffix`	`string`	-
Texte de suffixe du Select. N'est affiché qu'à l'état de focus ou lorsque le Select a une valeur. Peut également être défini via `slot="suffix"`.
`icon`	`icon`	`string`	-
Nom de l'icône Material Icons pour l'icône de préfixe du Select. Peut également être défini via `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Nom de l'icône Material Icons pour l'icône de suffixe du Select. Peut également être défini via `slot="end-icon"`.
`error-icon`	`errorIcon`	`string`	-
Lorsque la validation du champ du formulaire échoue, nom de l'icône Material Icons affichée à droite du Select. Peut également être défini via `slot="error-icon"`.
`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>`.
`readonly`	`readonly`	`boolean`	`false`
Si le champ est en lecture seule
`disabled`	`disabled`	`boolean`	`false`
Si le composant est désactivé
`required`	`required`	`boolean`	`false`
Si ce champ doit être obligatoirement rempli 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
`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 la valeur sélectionnée change
`invalid`
Se déclenche lorsque la validation du champ du formulaire échoue
`clear`
Se déclenche lors du clic sur le bouton d'effacement généré par l'attribut `clearable`. Vous pouvez empêcher l'effacement du Select en appelant `event.preventDefault()`.

Slots

Nom
Défaut
Éléments `<mdui-menu-item>`
`icon`
Icône de gauche
`end-icon`
Icône de droite
`error-icon`
Icône de droite à l'état d'échec de validation
`prefix`
Texte de gauche
`suffix`
Texte de droite
`clear-button`
Bouton d'effacement
`clear-icon`
Icône dans le bouton d'effacement
`helper`
Texte d'aide en bas

CSS Parts

Nom
`chips`
Conteneur des chips correspondant aux valeurs sélectionnées en sélection multiple
`chip`
Chip correspondant à chaque valeur sélectionnée en sélection multiple
`chip__button`
Élément `<button>` dans la chip
`chip__label`
Texte de la chip
`chip__delete-icon`
Icône de suppression de la chip
`text-field`
Champ de texte, c'est-à-dire l'élément `<mdui-text-field>`
`text-field__container`
Conteneur du champ de texte
`text-field__icon`
Icône de gauche du champ de texte
`text-field__end-icon`
Icône de droite du champ de texte
`text-field__error-icon`
Icône de droite à l'état d'échec de validation du champ de texte
`text-field__prefix`
Texte de gauche du champ de texte
`text-field__suffix`
Texte de droite du champ de texte
`text-field__label`
Texte de l'étiquette du champ de texte
`text-field__input`
Élément `<input>` du champ de texte
`text-field__clear-button`
Bouton d'effacement du champ de texte
`text-field__clear-icon`
Icône du bouton d'effacement du champ de texte
`text-field__supporting`
Conteneur des informations auxiliaires en bas du champ de texte, y compris l'aide et l'erreur
`text-field__helper`
Texte d'aide en bas du champ de texte
`text-field__error`
Texte de description d'erreur en bas du champ de texte
`menu`
Dropdown, c'est-à-dire l'élément `<mdui-menu>`

Chapitre précédent

RangeSlider

Chapitre suivant

SegmentedButton