SChoice <s-choice>

Uma opção dentro de uma lista de opções. SChoice é o wrapper de Vue 3 tipado do web component <s-choice> do Shopify Polaris.

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

Exemplo

<SChoice> doesn't render on its own — it's an individual choice within an <SChoiceList>. Its value prop is what feeds the parent's values array (bound via v-model), and its default slot is the choice label.

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">
    <!-- Each SChoice's `value` is collected into SChoiceList's v-model array -->
    <SChoice value="email">Email</SChoice>
    <SChoice value="sms">SMS</SChoice>
    <SChoice value="push">Push notification</SChoice>
  </SChoiceList>
  <p>Selected: {{ value.join(', ') }}</p>
</template>

Props

Prop	Tipo	Descrição
accessibilityLabel	string	Um rótulo destinado a usuários de tecnologias assistivas, como leitores de tela. Quando definido, os elementos filhos ou a label fornecida não são anunciados. Também pode ser usado para exibir um controle sem rótulo visível, ainda oferecendo contexto aos usuários de leitores de tela.
defaultSelected	boolean	Se o controle está ativo por padrão.
disabled	boolean	Desativa o controle, impedindo qualquer interação.
selected	boolean	Se o controle está ativo.
value	string	O valor usado nos dados do formulário quando o controle está marcado.

Slots

Slot	Descrição
default	O rótulo que identifica esta opção selecionável para os usuários. O rótulo é gerado extraindo e concatenando os nós de texto do conteúdo fornecido; qualquer marcação ou estrutura de elementos é ignorada.
details	Texto adicional que oferece contexto ou orientação sobre a entrada. Esse texto é exibido junto com a entrada e seu rótulo para oferecer mais informações ou instruções ao usuário.
secondary-content	Conteúdo adicional exibido abaixo do rótulo da opção. Pode incluir conteúdo avançado, como TextFields, Buttons ou outros componentes interativos. Os manipuladores de eventos dos componentes React são preservados.