SOption <s-option>

셀렉트 안의 옵션 하나입니다. SOption은(는) Shopify Polaris <s-option> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

예시

<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	타입	설명
defaultSelected	boolean	컨트롤이 기본적으로 활성 상태인지 여부입니다.
disabled	boolean	컨트롤을 비활성화하여 모든 상호작용을 막습니다.
selected	boolean	컨트롤이 활성 상태인지 여부입니다.
value	string	컨트롤이 체크되었을 때 폼 데이터에 사용되는 값입니다.

Slots

Slot	설명
default	옵션 레이블로 표시되는 텍스트 또는 요소로, 드롭다운이나 선택 목록에서 사용자에게 선택 항목을 식별시킵니다.