SChoiceList <s-choice-list>

Un grupo de botones de opción o casillas de verificación para elegir una o varias opciones. SChoiceList es el wrapper de Vue 3 tipado del web component <s-choice-list> de Shopify Polaris.

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

Buenas prácticas

• Ajusta el modo de selección a las opciones. Mantén la selección única para opciones que se excluyen entre sí, como métodos de pago o velocidades de envío, y define multiple cuando los comerciantes puedan elegir más de una.
• Haz que las etiquetas de cada opción describan el resultado. "Email notifications for new orders" dice más que "Email". Mantén las etiquetas cortas, pero lo bastante claras para entenderse por sí solas.
• Formula el label como una pregunta o una afirmación. Un título como "Which shipping method?" o "Select notification preferences" dice más a los comerciantes que una palabra vaga como "Options" o "Settings".
• Explica las opciones complejas en el slot details. Añade detalles a un SChoice concreto cuando los comerciantes necesiten entender lo que implica elegirlo.
• Haz que los mensajes de error sean específicos. Indica a los comerciantes exactamente qué falta, por ejemplo "Select at least one notification preference", en lugar de un genérico "Required field".

<SChoiceList label="Which shipping method?">
  <SChoice value="standard">Standard shipping</SChoice>
  <SChoice value="express">
    Express shipping
    <template #details>
      <SText>Costs more, but orders arrive in 1–2 business days.</SText>
    </template>
  </SChoice>
</SChoiceList>

Consulta las buenas prácticas de Shopify para <s-choice-list> (en inglés) para ver todas las recomendaciones.

Ejemplo

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">
    <SChoice value="email">Email</SChoice>
    <SChoice value="sms">SMS</SChoice>
    <SChoice value="push">Push notification</SChoice>
  </SChoiceList>
  <p>Selected: {{ value.join(', ') }}</p>
</template>

v-model

v-model en <SChoiceList> se vincula a la propiedad values y escucha el event DOM change.

<SChoiceList v-model="value" />

equivale a:

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

Props

Prop	Tipo	Descripción
details	any	Texto adicional que aporta contexto u orientación sobre el campo. Este texto se muestra junto con el campo y su etiqueta para ofrecer más información o instrucciones al usuario. También se expone a los usuarios de lectores de pantalla.
disabled	boolean	Si el campo está deshabilitado, lo que impide cualquier interacción del usuario. Cuando es true, se ignora la propiedad disabled de cualquier opción hija.
error	any	Indica un error al usuario. El campo recibe un tratamiento estilístico específico para comunicar problemas que deben resolverse de inmediato.
label	any	Contenido que se usa como etiqueta del campo.
labelAccessibilityVisibility	"visible" | "exclusive"	Cambia la visibilidad de la etiqueta del componente. - visible: la etiqueta es visible para todos los usuarios. - exclusive: la etiqueta se oculta visualmente, pero permanece en el árbol de accesibilidad.
multiple	boolean	Si se pueden seleccionar varias opciones.
name	string	Un identificador del campo que es único dentro del formulario contenedor más cercano.
values	string[]	Un array con los value de las opciones seleccionadas. Es una prop de conveniencia para establecer la prop selected en las opciones secundarias.

Events

Event	Tipo
change	Event
input	Event

Escúchalos con listeners del estilo @change en <SChoiceList>.

Slots

Slot	Descripción
default	Las opciones entre las que el usuario puede elegir. Acepta componentes de opción.