SChoice <s-choice>

Eine Option innerhalb einer Auswahlliste. SChoice ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-choice>.

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

Beispiel

<SChoice> doesn't render on its own — it's an individual choice within an <SChoiceList>. Its value prop is what feeds the parent's values array (bound via v-model), and its default slot is the choice label.

EmailSMSPush notification

Selected: (none)

<script setup>
import { ref } from 'vue'
import { SChoiceList, SChoice } from 'polaris-vue-elements'

const value = ref([])
</script>

<template>
  <SChoiceList label="Notify me by" multiple v-model="value">
    <!-- Each SChoice's `value` is collected into SChoiceList's v-model array -->
    <SChoice value="email">Email</SChoice>
    <SChoice value="sms">SMS</SChoice>
    <SChoice value="push">Push notification</SChoice>
  </SChoiceList>
  <p>Selected: {{ value.join(', ') }}</p>
</template>

Props

Prop	Typ	Beschreibung
accessibilityLabel	string	Ein Label für Nutzer assistiver Technologien wie Screenreader. Wenn gesetzt, werden Kindelemente oder ein angegebenes label nicht vorgelesen. Damit lässt sich auch ein Control ohne sichtbares Label anzeigen, das Screenreader-Nutzern dennoch Kontext bietet.
defaultSelected	boolean	Ob das Steuerelement standardmäßig aktiv ist.
disabled	boolean	Deaktiviert das Control und verhindert jegliche Interaktion.
selected	boolean	Ob das Steuerelement aktiv ist.
value	string	Der in den Formulardaten verwendete Wert, wenn das Steuerelement aktiviert ist.

Slots

Slot	Beschreibung
default	Die Beschriftung, die diese auswählbare Option für Benutzer kennzeichnet. Die Beschriftung entsteht durch Extrahieren und Verketten der Textknoten des übergebenen Inhalts; Markup und Elementstruktur werden ignoriert.
details	Zusätzlicher Text, der Kontext oder Hilfestellung zum Input bietet. Dieser Text wird zusammen mit dem Input und seinem Label angezeigt, um dem Nutzer weitere Informationen oder Anweisungen zu geben.
secondary-content	Zusätzlicher Inhalt unterhalb des Labels der Auswahloption. Kann reichhaltige Inhalte wie TextFields, Buttons oder andere interaktive Komponenten enthalten. Event-Handler an React-Komponenten bleiben erhalten.