SChoice <s-choice>

선택 목록 안의 옵션 하나입니다. SChoice은(는) Shopify Polaris <s-choice> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

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

예시

<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	타입	설명
accessibilityLabel	string	스크린 리더 같은 보조 기술 사용자를 위한 레이블입니다. 설정하면 제공된 자식 요소나 label은 읽히지 않습니다. 시각적 레이블 없이 컨트롤을 표시하면서도 스크린 리더 사용자에게 맥락을 제공하는 데 사용할 수도 있습니다.
defaultSelected	boolean	컨트롤이 기본적으로 활성 상태인지 여부입니다.
disabled	boolean	컨트롤을 비활성화하여 모든 상호작용을 막습니다.
selected	boolean	컨트롤이 활성 상태인지 여부입니다.
value	string	컨트롤이 체크되었을 때 폼 데이터에 사용되는 값입니다.

Slots

Slot	설명
default	이 선택 가능한 옵션을 사용자에게 식별시키는 레이블입니다. 레이블은 제공된 콘텐츠에서 텍스트 노드를 추출해 이어 붙여 만들어지며, 마크업이나 요소 구조는 무시됩니다.
details	입력란에 대한 맥락이나 안내를 제공하는 추가 텍스트입니다. 이 텍스트는 입력란 및 레이블과 함께 표시되어 사용자에게 더 많은 정보나 지침을 제공합니다.
secondary-content	선택 항목 레이블 아래에 표시할 추가 콘텐츠입니다. TextField, Button 등 인터랙티브 컴포넌트 같은 풍부한 콘텐츠를 포함할 수 있습니다. React 컴포넌트의 이벤트 핸들러는 유지됩니다.