SSelect <s-select>

Ein Dropdown zur Auswahl einer Option aus einer Liste. SSelect ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-select>.

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

Best Practices

• Für eine bekannte Menge an Optionen verwenden. Ein Select passt, wenn Händler aus einer vordefinierten Liste wählen. Müssen Händler einen eigenen Wert eingeben oder eine lange Liste durchsuchen, ist ein Textfeld mit Vorschlägen während der Eingabe oder ein durchsuchbares Dropdown besser geeignet.
• Optionen bewusst ordnen. Gruppieren Sie zusammengehörige Optionen, setzen Sie die häufigsten an den Anfang oder sortieren Sie alphabetisch, wenn es keine natürliche Reihenfolge gibt, damit Händler ihre Wahl schnell finden.
• Leicht überfliegbare Labels schreiben. Geben Sie jeder Option genug Kontext, damit Händler sie unterscheiden können, ohne die Liste zu öffnen und mehrere durchzulesen.
• Den Ausgangszustand bewusst wählen. Wählen Sie eine Option vor, wenn es einen offensichtlichen Standard gibt, und verwenden Sie einen placeholder, wenn Händler eine bewusste Wahl treffen sollen. Lassen Sie den Anfangszustand nicht mehrdeutig.
• Validierungsprobleme erklären. Ist eine Auswahl erforderlich oder ungültig, sagen Sie Händlern mit error konkret, was zu tun ist, denn passgenaue Meldungen helfen ihnen, Formulare schneller abzuschließen als allgemeine.

<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>

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-select> (auf Englisch).

Beispiel

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 auf <SSelect> bindet die Property value und lauscht auf das DOM-Event change.

<SSelect v-model="value" />

entspricht:

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

Props

Prop	Typ	Beschreibung
details	any	Zusätzlicher Text, der Kontext oder Hilfestellung zum Feld bietet. Dieser Text wird zusammen mit dem Feld und seinem Label angezeigt, um dem Nutzer weitere Informationen oder Anweisungen zu geben. Er wird auch Screenreader-Nutzern zugänglich gemacht.
disabled	boolean	Deaktiviert das Feld und verhindert jegliche Interaktion.
error	any	Zeigt dem Nutzer einen Fehler an. Das Feld erhält eine besondere Gestaltung, um Probleme zu kennzeichnen, die sofort behoben werden müssen.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Die Art des Icons, das im Feld angezeigt wird.
id	string	Eine eindeutige Kennung für das Element.
label	any	Inhalt, der als Label des Felds verwendet wird.
labelAccessibilityVisibility	"visible" | "exclusive"	Ändert die Sichtbarkeit des Labels der Komponente. - visible: Das Label ist für alle Nutzer sichtbar. - exclusive: Das Label ist visuell ausgeblendet, bleibt aber im Accessibility Tree.
name	string	Eine Kennung für das Feld, die innerhalb des nächsten umschließenden Formulars eindeutig ist.
placeholder	string	Ein kurzer Hinweis, der den erwarteten Wert des Felds beschreibt.
required	boolean	Ob das Feld einen Wert benötigt. Diese Anforderung verleiht dem Feld semantische Bedeutung, führt aber nicht automatisch zur Anzeige eines Fehlers. Wenn ein Fehler angezeigt werden soll, sobald dieses Feld leer ist, verwenden Sie dafür die Eigenschaft error.
value	string

Einige Typspalten oben wurden zur besseren Lesbarkeit gekürzt; die vollständigen Unions finden sich in den generierten TypeScript-Typen der Bibliothek (src/lib/generated/types.ts).

Events

Event	Typ
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

Auf diese Events lauschen Sie mit Listenern im Stil von @blur auf <SSelect>.

Slots

Slot	Beschreibung
default	Die auswählbaren Optionen in der Dropdown-Liste. Akzeptiert Option-Komponenten für einzelne auswählbare Einträge sowie Option-Group-Komponenten, um zusammengehörige Optionen in logischen Gruppen mit Beschriftungen zu organisieren.
details
error