SCheckbox <s-checkbox>

Une case à cocher unique pour un choix oui/non, liée à son état coché avec v-model. SCheckbox est le wrapper Vue 3 typé du web component <s-checkbox> de Shopify Polaris.

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

Bonnes pratiques

• Gardez chaque case à cocher indépendante. Les marchands doivent pouvoir cocher n'importe quelle combinaison d'options sans qu'une case n'influe sur une autre.
• Donnez à chaque case un label descriptif. C'est essentiel lorsqu'une case active ou désactive un paramètre, pour que les marchands sachent exactement ce qu'ils activent.
• Ordonnez les options de façon logique. Triez-les par ordre alphabétique, numérique ou chronologique pour que les marchands trouvent rapidement celle qu'ils cherchent.
• Réservez indeterminate à la sélection partielle « tout sélectionner ». Utilisez-le sur une case « tout sélectionner » lorsque seule une partie des éléments de son groupe est cochée.
• Ajoutez details lorsque le contexte aide. Utilisez-le pour expliquer plus en détail ce que fait une option, uniquement lorsque le libellé seul ne suffit pas.

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

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

Exemple

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 sur <SCheckbox> est lié à la propriété checked et écoute l'event DOM change.

<SCheckbox v-model="value" />

équivaut à :

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

Props

Prop	Type	Description
accessibilityLabel	string	Un libellé destiné aux utilisateurs de technologies d'assistance comme les lecteurs d'écran. Lorsqu'il est défini, les enfants ou le label fournis ne sont pas annoncés. Il permet aussi d'afficher un contrôle sans libellé visible, tout en apportant du contexte aux utilisateurs de lecteurs d'écran.
checked	boolean	Indique si le contrôle est actif.
defaultChecked	boolean	Indique si le contrôle est actif par défaut.
defaultIndeterminate	boolean	L'état indéterminé initial pour les composants non contrôlés. Utilisez-le lorsque la case à cocher doit démarrer dans un état indéterminé sans que vous ayez besoin de la contrôler ensuite. Cette valeur s'applique jusqu'à ce que indeterminate soit défini explicitement ou que l'utilisateur change l'état de la case en cliquant.
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 contrôle, 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.
indeterminate	boolean	Indique si la case à cocher s'affiche dans un état indéterminé (ni cochée ni décochée), généralement utilisé pour signaler une sélection partielle dans des listes hiérarchiques. Cet état visuel prime sur la prop checked pour l'apparence uniquement. La valeur soumise avec le formulaire reste déterminée par la prop checked. Si indeterminate n'a pas été défini explicitement ni modifié par une interaction de l'utilisateur, la valeur de defaultIndeterminate est renvoyée.
label	any	Contenu visuel à utiliser comme libellé du contrôle.
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 contrôle, unique au sein du composant Form parent le plus proche.
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	La valeur utilisée dans les données du formulaire lorsque le contrôle est coché.

Events

Event	Type
blur	FocusEvent
change	Event
input	Event

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

Slots

Slot	Description
details
error