SCheckbox <s-checkbox>

Eine einzelne Checkbox für eine Ja/Nein-Auswahl, deren checked-Zustand per v-model gebunden wird. SCheckbox ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-checkbox>.

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

Best Practices

• Jede Checkbox unabhängig halten. Händler sollten jede beliebige Kombination von Optionen ankreuzen können, ohne dass eine Checkbox eine andere beeinflusst.
• Jeder Checkbox ein aussagekräftiges label geben. Das ist besonders wichtig, wenn eine Checkbox eine Einstellung ein- oder ausschaltet, damit Händler genau wissen, was sie aktivieren.
• Optionen logisch ordnen. Sortieren Sie sie alphabetisch, numerisch oder zeitlich, damit Händler die gewünschte Option schnell finden.
• indeterminate für teilweises „Alle auswählen“ reservieren. Verwenden Sie es an einer „Alle auswählen“-Checkbox, wenn nur ein Teil der Elemente ihrer Gruppe ausgewählt ist.
• details ergänzen, wenn Kontext hilft. Nutzen Sie es für zusätzliche Erklärungen zur Wirkung einer Option, aber nur, wenn das Label allein nicht ausreicht.

<SCheckbox
  label="Send order confirmation emails"
  details="Customers get an email as soon as their order is placed."
/>

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

Beispiel

Checked: false

<script setup>
import { ref } from 'vue'
import { SCheckbox } from 'polaris-vue-elements'

const value = ref(false)
</script>

<template>
  <SCheckbox label="Send me marketing emails" v-model="value" />
  <p>Checked: {{ value }}</p>
</template>

v-model

v-model auf <SCheckbox> bindet die Property checked und lauscht auf das DOM-Event change.

<SCheckbox v-model="value" />

entspricht:

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

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.
checked	boolean	Ob das Steuerelement aktiv ist.
defaultChecked	boolean	Ob das Steuerelement standardmäßig aktiv ist.
defaultIndeterminate	boolean	Der anfängliche unbestimmte Zustand für unkontrollierte Komponenten. Verwenden Sie dies, wenn die Checkbox in einem unbestimmten Zustand starten soll, Sie ihn danach aber nicht steuern müssen. Dieser Wert gilt, bis indeterminate explizit gesetzt wird oder der Benutzer den Zustand der Checkbox per Klick ändert.
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 Control 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.
indeterminate	boolean	Ob die Checkbox in einem unbestimmten Zustand angezeigt wird (weder aktiviert noch deaktiviert), typischerweise um eine Teilauswahl in hierarchischen Listen anzuzeigen. Dieser visuelle Zustand hat nur optisch Vorrang vor der Prop checked. Der beim Absenden des Formulars übermittelte Wert wird weiterhin durch die Prop checked bestimmt. Wurde indeterminate weder explizit gesetzt noch durch Benutzerinteraktion geändert, wird der Wert von defaultIndeterminate zurückgegeben.
label	any	Visueller Inhalt, der als Beschriftung des Steuerelements 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 Control, die innerhalb der nächsten umschließenden Form-Komponente eindeutig ist.
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	Der in den Formulardaten verwendete Wert, wenn das Steuerelement aktiviert ist.

Events

Event	Typ
blur	FocusEvent
change	Event
input	Event

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

Slots

Slot	Beschreibung
details
error