SChoiceList <s-choice-list>

Um grupo de botões de opção ou caixas de seleção para escolher uma ou várias opções. SChoiceList é o wrapper de Vue 3 tipado do web component <s-choice-list> do Shopify Polaris.

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

Boas práticas

• Ajuste o modo de seleção às opções. Mantenha a seleção única para opções mutuamente exclusivas, como formas de pagamento ou velocidades de envio, e defina multiple quando os lojistas puderem escolher mais de uma.
• Faça os rótulos das opções descreverem o resultado. "Notificações por e-mail para novos pedidos" diz mais do que "E-mail". Mantenha os rótulos curtos, mas claros o bastante para se sustentarem sozinhos.
• Formule o label como uma pergunta ou uma afirmação. Um título como "Qual forma de envio?" ou "Selecione as preferências de notificação" diz mais aos lojistas do que uma palavra vaga como "Opções" ou "Configurações".
• Explique escolhas complexas no slot details. Adicione detalhes a um SChoice específico quando os lojistas precisarem entender o que implica escolhê-lo.
• Torne as mensagens de error específicas. Diga aos lojistas exatamente o que está faltando, por exemplo "Selecione pelo menos uma preferência de notificação", em vez de um genérico "Campo obrigatório".

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

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

Exemplo

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

<SChoiceList v-model="value" />

equivale a:

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

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	Se o campo está desabilitado, impedindo qualquer interação do usuário. Quando true, a propriedade disabled de qualquer opção filha é ignorada.
error	any	Indica um erro ao usuário. O campo recebe um tratamento visual específico para comunicar problemas que precisam ser resolvidos imediatamente.
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.
multiple	boolean	Se várias opções podem ser selecionadas.
name	string	Um identificador do campo que é exclusivo dentro do formulário contêiner mais próximo.
values	string[]	Um array com os value das opções selecionadas. É uma prop de conveniência para definir a prop selected nas opções filhas.

Events

Event	Tipo
change	Event
input	Event

Escute-os com listeners no estilo @change em <SChoiceList>.

Slots

Slot	Descrição
default	As opções que o usuário pode selecionar. Aceita componentes de opção.