SOptionGroup <s-option-group>

셀렉트 안의 관련 옵션을 공통 라벨 아래에 묶습니다. SOptionGroup은(는) Shopify Polaris <s-option-group> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

예시

<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	타입	설명
disabled	boolean	이 그룹 안의 옵션을 선택할 수 있는지 여부입니다.
label	string	이 옵션 그룹에 대해 사용자에게 표시되는 레이블입니다.

Slots

Slot	설명
default	드롭다운 목록에 표시되는 선택 가능한 옵션입니다. 이 그룹 안의 개별 선택 항목으로 옵션 컴포넌트를 허용합니다.