SSelect <s-select>

Uma lista suspensa para escolher uma opção de uma lista. SSelect é o wrapper de Vue 3 tipado do web component <s-select> do Shopify Polaris.

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

Boas práticas

• Use para um conjunto conhecido de opções. Um select funciona quando os lojistas escolhem a partir de uma lista predefinida. Quando eles precisarem inserir um valor personalizado ou procurar em uma lista longa, um campo de texto que sugira correspondências enquanto digitam, ou um dropdown com busca, é mais adequado.
• Ordene as opções de forma deliberada. Agrupe opções relacionadas, coloque as mais comuns primeiro ou ordene alfabeticamente quando não houver uma ordem natural, para que os lojistas encontrem a escolha rapidamente.
• Escreva rótulos fáceis de percorrer. Dê a cada opção contexto suficiente para que os lojistas consigam diferenciá-las sem precisar abrir a lista e ler várias delas.
• Escolha o estado inicial de propósito. Pré-selecione uma opção quando houver um padrão óbvio, e use um placeholder quando os lojistas precisarem fazer uma escolha consciente. Não deixe o estado inicial ambíguo.
• Explique os problemas de validação. Quando uma seleção for obrigatória ou inválida, use error para dizer aos lojistas especificamente o que fazer, já que mensagens personalizadas os ajudam a concluir formulários mais rápido do que mensagens genéricas.

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

Veja as boas práticas da Shopify para <s-select> (em inglês) para todas as recomendações.

Exemplo

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 em <SSelect> se vincula à propriedade value e escuta o event DOM change.

<SSelect v-model="value" />

equivale a:

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

Props

Prop	Tipo	Descrição
details	any	Texto adicional que oferece contexto ou orientação sobre o campo. Esse texto é exibido junto com o campo e seu rótulo para oferecer mais informações ou instruções ao usuário. Ele também é exposto aos usuários de leitores de tela.
disabled	boolean	Desativa o campo, impedindo qualquer interação.
error	any	Indica um erro ao usuário. O campo recebe um tratamento visual específico para comunicar problemas que precisam ser resolvidos imediatamente.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	O tipo de ícone a ser exibido no campo.
id	string	Um identificador exclusivo para o elemento.
label	any	Conteúdo usado como rótulo do campo.
labelAccessibilityVisibility	"visible" | "exclusive"	Altera a visibilidade do rótulo do componente. - visible: o rótulo fica visível para todos os usuários. - exclusive: o rótulo fica visualmente oculto, mas permanece na árvore de acessibilidade.
name	string	Um identificador do campo que é exclusivo dentro do formulário contêiner mais próximo.
placeholder	string	Uma breve indicação que descreve o valor esperado do campo.
required	boolean	Se o campo exige um valor. Este requisito adiciona valor semântico ao campo, mas não faz um erro aparecer automaticamente. Se quiser exibir um erro quando este campo estiver vazio, você pode fazer isso com a propriedade error.
value	string

Algumas colunas de tipo acima estão truncadas para facilitar a leitura; a união completa está disponível nos tipos TypeScript gerados da biblioteca (src/lib/generated/types.ts).

Events

Event	Tipo
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

Escute-os com listeners no estilo @blur em <SSelect>.

Slots

Slot	Descrição
default	As opções selecionáveis exibidas na lista suspensa. Aceita componentes de opção para itens selecionáveis individuais e componentes de grupo de opções para organizar opções relacionadas em grupos lógicos com rótulos.
details
error