SOptionGroup <s-option-group>

Agrupa opciones relacionadas dentro de un select bajo una etiqueta común. SOptionGroup es el wrapper de Vue 3 tipado del web component <s-option-group> de Shopify Polaris.

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

Ejemplo

<SOptionGroup> doesn't render on its own — it groups related <SOption> children under a label inside an <SSelect>.

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 labels a cluster of SOption children -->
    <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>

Props

Prop	Tipo	Descripción
disabled	boolean	Si las opciones de este grupo se pueden seleccionar o no.
label	string	La etiqueta visible para el usuario de este grupo de opciones.

Slots

Slot	Descripción
default	Las opciones seleccionables que se muestran en la lista desplegable. Acepta componentes option para elementos seleccionables individuales dentro de este grupo.