Statut
Component checklist
Usage
<dsa-select
id="select"
name="name"
label="Pays"
>
<dsa-option value="fr_FR">France</dsa-option>
<dsa-option value="en_UK">Angleterre</dsa-option>
<dsa-option value="en_US">États-Unis</dsa-option>
<dsa-option value="fr_BE">Belgique</dsa-option>
</dsa-select>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/select/select.js'
import '@ds-autonomie/web-components/dist/components/option/option.js'
import type { DSASelect, DSAOption } from '@ds-autonomie/web-components';
const el = document.querySelector<DSASelect>('#select')
if (el !== null) {
console.log(el.value)
}
</script>
API
Attributs et propriétés
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
accessibleName accessible-name |
Fournit un nom accessible dans le cas où aucun label n'est fourni. |
string |
- |
|
clearable |
Affiche le bouton supprimer lorsque le champ a une valeur définie |
boolean |
false |
|
defaultValue |
La valeur par défaut du contrôle. Utilisé principalement pour la remise à zero du form control |
string |
- |
|
description |
Fournit une description au composant pour une meilleure accessibilité. |
string |
'' |
|
disabled |
Désactive le champ de saisie |
boolean |
false |
|
displayValue display-value |
Affiche la valeur plutôt que le label de l'option |
boolean |
false |
|
error |
Indique si le composant doit être en état d'erreur |
boolean |
false |
|
errorMessage error-message |
Un message d'erreur qui est affiché lorsque l'attribut error est définie à true. Si plusieurs messages doivent être affichés, les ajouter dans la chaine de caractères séparés par des pipes "|". |
string | string[] |
'' |
|
form |
Par défaut, les contrôles de formulaire sont associés à l'élément de formulaire parent le plus proche. Cet attribut permet de placer le contrôle de formulaire en dehors d'un formulaire et de l'associer au formulaire qui a cet identifiant. Le formulaire doit être dans le même document ou racine fantôme pour que cela fonctionne |
string |
'' |
|
helpText help-text |
Le help-text du champ. Pour afficher du HTML, utilisez le slot help-text |
string |
'' |
|
hoist |
Activez cette option pour éviter que le panneau ne soit coupé lorsque le composant est placé à l'intérieur d'un conteneur avec overflow : scroll | auto. Hoisting utilise une stratégie de positionnement fixe qui fonctionne dans de nombreux cas, mais pas dans tous |
boolean |
false |
|
label |
Le label du champ. Pour afficher du HTML, utilisez le slot label |
string |
'' |
|
maxOptionsVisible max-options-visible |
Le nombre maximum d'options sélectionnées lorsque multiple est à true. Une fois le maximum atteint, "+n" affichera le nombre d'options additionnelles sélectionnées. Fournir la valeur 0 pour enlever la limite |
number |
3 |
|
multiple |
Permet la sélection de une ou plusieurs options |
boolean |
false |
|
name |
Le nom du champ, soumis sous la forme d'une paire nom/valeur avec les données du formulaire |
string |
'' |
|
noSyncWidth no-sync-width |
Le dropdown n'aura pas la même taille que son ancre |
boolean |
false |
|
open |
Indique si le select est ouverte ou non. Utiliser cet attribut pour afficher ou cacher le select, ou utiliser les propriétés show() et hide() |
boolean |
false |
|
placeholder |
Un texte qui apparaît dans le contrôle lorsqu'aucune valeur n'y est écrite |
string |
'' |
|
placement |
Le placement privilégier du panneau de dropdown. As savoir que le placement peux varier en fonction des besoins pour afficher le panneau à l'intérieur du viewport |
top top-start top-end bottom bottom-start bottom-end right right-start right-end left left-start left-end |
bottom-start |
|
readonly |
Désactive le champ de saisie tout en le gardant focusable |
boolean |
false |
|
required |
Rend le champ obligatoire |
boolean |
false |
|
size |
La taille du champ de saisie |
small medium large |
'medium' |
|
value |
La valeur actuelle du composant select, représentant une liste des options sélectionnées (ou une seule option si multiple est désactivé). Elle peut être utilisées pour définir quelles options sont sélectionnées par défaut. Les options sélectionnées sont désignées par leur valeur et séparées par un espace, et seront soumises sous forme de paires nom/valeur avec les données du formulaire. |
string | string[] |
'' |
|
variant |
La variante du champ de saisie |
layer base |
'base' |
Méthodes
|
|
Description |
Type |
|
blur() |
Enlève le focus du champ |
() => void |
|
checkValidity() |
Vérifie la validité du champ mais ne montre pas de message de validation |
() => boolean |
|
focus() |
Met le focus sur le champ |
(options?: FocusOptions) => void |
|
getForm() |
Obtient le formulaire associé si il existe |
() => HTMLFormElement | null |
|
hide() |
Cache le panneau du dropdown |
() => Promise<void> |
|
reportValidity() |
Vérifie la validité et montre le message du navigateur si le champ est invalide |
() => boolean |
|
setCustomValidity() |
Défini un message de validation personnalisé |
(message: string) => void |
|
show() |
Affiche le panneau du dropdown |
() => Promise<void> |
Slots
|
Nom |
Description |
|---|---|
|
(défaut) |
Le contenu principal du dropdown, généralement une liste de dsa-option |
|
label |
Le slot du libellé du champ de saisie. Alternativement, vous pouvez utiliser l'attribut label |
|
prefix |
Utilisé pour ajouter une icône de présentation ou un élément similaire à l'entrée |
|
help-text |
Texte qui décrit comment utiliser le champ de saisie. Alternativement, vous pouvez utiliser l'attribut help-text |
|
tooltip |
Texte qui permet de passer des informations additionnelles à coté du libellé |
Événements
|
Nom |
Description |
|---|---|
|
dsa-after-hide |
Émis une fois que le panneau est caché |
|
dsa-after-show |
Émis une fois que le panneau est ouvert |
|
dsa-blur |
Émis lorsque le champ perd le focus |
|
dsa-change |
Émis lorsque la valeur du champ change |
|
dsa-clear |
Émis lorsque la valeur du champ est effacé |
|
dsa-focus |
Émis lorsque le champ obtient le focus |
|
dsa-hide |
Émis quand le panneau est caché |
|
dsa-input |
Émis lorsque le champ reçoit une entrée |
|
dsa-invalid |
Émis lorsque le contrôle de formulaire vérifie la validité du champ et que les contraintes ne sont pas respectées |
|
dsa-show |
Émis quand le panneau s'ouvre |