SChoice <s-choice>

Una opción dentro de una lista de opciones. SChoice es el wrapper de Vue 3 tipado del web component <s-choice> de Shopify Polaris.

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

Ejemplo

<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	Descripción
accessibilityLabel	string	Una etiqueta destinada a los usuarios de tecnologías de asistencia, como los lectores de pantalla. Cuando se define, no se anuncian los elementos secundarios ni la label proporcionada. También puede usarse para mostrar un control sin etiqueta visible y seguir aportando contexto a los usuarios de lectores de pantalla.
defaultSelected	boolean	Si el control está activo de forma predeterminada.
disabled	boolean	Desactiva el control e impide cualquier interacción.
selected	boolean	Si el control está activo.
value	string	El valor que se usa en los datos del formulario cuando el control está marcado.

Slots

Slot	Descripción
default	La etiqueta que identifica esta opción seleccionable ante los usuarios. La etiqueta se obtiene extrayendo y concatenando los nodos de texto del contenido proporcionado; se ignora cualquier marcado o estructura de elementos.
details	Texto adicional que aporta contexto u orientación sobre la entrada. Este texto se muestra junto con la entrada y su etiqueta para ofrecer más información o instrucciones al usuario.
secondary-content	Contenido adicional que se muestra debajo de la etiqueta de la opción. Puede incluir contenido enriquecido como TextFields, Buttons u otros componentes interactivos. Los controladores de eventos de los componentes de React se conservan.