SSelect <s-select>

Une liste déroulante pour choisir une option dans une liste. SSelect est le wrapper Vue 3 typé du web component <s-select> de Shopify Polaris.

import { SSelect } from 'polaris-vue-elements'

Bonnes pratiques

• Utilisez-le pour un ensemble de choix connu. Un select convient lorsque les marchands choisissent dans une liste prédéfinie. Lorsqu'ils doivent saisir une valeur personnalisée ou chercher dans une longue liste, un champ de texte qui suggère des correspondances pendant la saisie, ou une liste déroulante avec recherche, est plus adapté.
• Ordonnez les options de façon réfléchie. Regroupez les options liées, placez les plus courantes en premier ou triez-les par ordre alphabétique lorsqu'il n'existe pas d'ordre naturel, pour que les marchands trouvent rapidement leur choix.
• Rédigez des libellés faciles à parcourir. Donnez à chaque option assez de contexte pour que les marchands puissent les distinguer sans ouvrir la liste et en lire plusieurs.
• Choisissez délibérément l'état initial. Présélectionnez une option lorsqu'il existe une valeur par défaut évidente, et utilisez un placeholder lorsque les marchands doivent faire un choix conscient. Ne laissez pas l'état initial ambigu.
• Expliquez les problèmes de validation. Lorsqu'une sélection est requise ou invalide, utilisez error pour dire précisément aux marchands quoi faire, car des messages adaptés les aident à remplir les formulaires plus vite que des messages génériques.

<SSelect label="Shipping speed" placeholder="Choose a shipping speed" required>
  <SOption value="standard">Standard (5–7 business days)</SOption>
  <SOption value="express">Express (2–3 business days)</SOption>
  <SOption value="overnight">Overnight (next business day)</SOption>
</SSelect>

Consultez les bonnes pratiques de Shopify pour <s-select> (en anglais) pour l'ensemble des recommandations.

Exemple

United StatesCanadaFranceGermany

Value: (none)

<script setup>
import { ref } from 'vue'
import { SSelect, SOption, SOptionGroup } from 'polaris-vue-elements'

const value = ref('')
</script>

<template>
  <SSelect label="Shipping region" placeholder="Select a region" v-model="value">
    <SOptionGroup label="North America">
      <SOption value="us">United States</SOption>
      <SOption value="ca">Canada</SOption>
    </SOptionGroup>
    <SOptionGroup label="Europe">
      <SOption value="fr">France</SOption>
      <SOption value="de">Germany</SOption>
    </SOptionGroup>
  </SSelect>
  <p>Value: {{ value }}</p>
</template>

v-model

v-model sur <SSelect> est lié à la propriété value et écoute l'event DOM change.

<SSelect v-model="value" />

équivaut à :

<SSelect :value="value" @change="value = $event.target.value" />

Props

Prop	Type	Description
details	any	Texte supplémentaire apportant du contexte ou des indications pour le champ. Ce texte est affiché avec le champ et son libellé afin de fournir davantage d'informations ou d'instructions à l'utilisateur. Il est également exposé aux utilisateurs de lecteurs d'écran.
disabled	boolean	Désactive le champ, empêchant toute interaction.
error	any	Signale une erreur à l'utilisateur. Le champ reçoit un traitement visuel spécifique pour signaler des problèmes à résoudre immédiatement.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Le type d'icône à afficher dans le champ.
id	string	Un identifiant unique pour l'élément.
label	any	Contenu à utiliser comme libellé du champ.
labelAccessibilityVisibility	"visible" | "exclusive"	Modifie la visibilité du libellé du composant. - visible : le libellé est visible par tous les utilisateurs. - exclusive : le libellé est masqué visuellement mais reste dans l'arbre d'accessibilité.
name	string	Un identifiant du champ, unique au sein du formulaire parent le plus proche.
placeholder	string	Une courte indication décrivant la valeur attendue du champ.
required	boolean	Indique si le champ exige une valeur. Cette exigence ajoute une valeur sémantique au champ, mais n'affiche pas automatiquement d'erreur. Pour afficher une erreur lorsque ce champ est vide, utilisez la propriété error.
value	string

Certaines colonnes de type ci-dessus sont tronquées pour plus de lisibilité ; l'union complète est disponible dans les types TypeScript générés de la bibliothèque (src/lib/generated/types.ts).

Events

Event	Type
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

Écoutez-les avec des listeners de la forme @blur sur <SSelect>.

Slots

Slot	Description
default	Les options sélectionnables affichées dans la liste déroulante. Accepte des composants option pour les éléments sélectionnables individuels, et des composants option group pour organiser les options liées en groupes logiques avec libellés.
details
error