SOption <s-option>

Una opción dentro de un select. SOption es el wrapper de Vue 3 tipado del web component <s-option> de Shopify Polaris.

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

Ejemplo

<SOption> doesn't render on its own — it's an option within an <SSelect> (optionally grouped by <SOptionGroup>). Its value prop is what gets bound into the parent's v-model, and its default slot is the visible option label.

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">
      <!-- Each SOption's `value` is what SSelect's v-model receives -->
      <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>

Props

Prop	Tipo	Descripción
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	El texto o los elementos que se muestran como etiqueta de la opción, que identifica la opción seleccionable ante los usuarios en una lista desplegable o de selección.