SSelect <s-select>

Una lista desplegable para elegir una opción de una lista. SSelect es el wrapper de Vue 3 tipado del web component <s-select> de Shopify Polaris.

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

Buenas prácticas

• Úsalo para un conjunto de opciones conocido. Un select funciona cuando los comerciantes eligen de una lista predefinida. Cuando necesiten introducir un valor personalizado o buscar en una lista larga, encaja mejor un campo de texto que sugiera coincidencias mientras escriben, o un desplegable con búsqueda.
• Ordena las opciones de forma deliberada. Agrupa las opciones relacionadas, pon primero las más habituales u ordénalas alfabéticamente cuando no haya un orden natural, para que los comerciantes encuentren su opción rápidamente.
• Escribe etiquetas fáciles de recorrer. Da a cada opción el contexto suficiente para que los comerciantes puedan distinguirlas sin abrir la lista y leer varias de ellas.
• Elige el estado inicial a propósito. Preselecciona una opción cuando haya un valor predeterminado obvio, y usa un placeholder cuando los comerciantes deban hacer una elección consciente. No dejes el estado inicial ambiguo.
• Explica los problemas de validación. Cuando una selección sea obligatoria o no válida, usa error para decir a los comerciantes concretamente qué hacer, ya que los mensajes adaptados les ayudan a completar los formularios más rápido que los genéricos.

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

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

Ejemplo

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 en <SSelect> se vincula a la propiedad value y escucha el event DOM change.

<SSelect v-model="value" />

equivale a:

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

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	Desactiva el campo e impide cualquier interacción.
error	any	Indica un error al usuario. El campo recibe un tratamiento estilístico específico para comunicar problemas que deben resolverse de inmediato.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	El tipo de icono que se muestra en el campo.
id	string	Un identificador único para el elemento.
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.
name	string	Un identificador del campo que es único dentro del formulario contenedor más cercano.
placeholder	string	Una breve indicación que describe el valor esperado del campo.
required	boolean	Si el campo requiere un valor. Este requisito añade valor semántico al campo, pero no hará que aparezca un error automáticamente. Si quieres mostrar un error cuando este campo esté vacío, puedes hacerlo con la propiedad error.
value	string

Algunas columnas de tipo de arriba están truncadas para facilitar la lectura; la unión completa está disponible en los tipos de TypeScript generados de la biblioteca (src/lib/generated/types.ts).

Events

Event	Tipo
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

Escúchalos con listeners del estilo @blur en <SSelect>.

Slots

Slot	Descripción
default	Las opciones seleccionables que se muestran en la lista desplegable. Acepta componentes option para elementos seleccionables individuales y componentes option group para organizar opciones relacionadas en grupos lógicos con etiquetas.
details
error