KRDS Vue

수량 토글 Quantity toggle ​

수량 토글은 사용자가 수량 옵션을 늘리거나 줄이는 데 사용되며, 한정된 범위 내에서 수량 선택을 위해 사용한다.

KRDS 가이드

기본 ​

v-model로 수량(number)을 연결하고 label로 어떤 수량인지 안내합니다. 최솟값(min, 기본 0)이나 최댓값(max, 기본 10)에 닿으면 해당 버튼이 비활성화됩니다. KRDS 가이드에 따라 선택 범위는 기준값을 포함해 11단계 이내로 정하고, 그보다 넓으면 텍스트 입력 필드를 씁니다.

관람 인원
1
vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsQuantityToggle } from '@krds.ui/vue'

  const count = ref(1)
</script>

<template>
  <KrdsQuantityToggle v-model="count" label="관람 인원" :min="1" :max="4" />
</template>

세로형 ​

vertical을 지정하면 + 버튼이 위, − 버튼이 아래에 놓입니다.

증명서 발급 수
0
vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsQuantityToggle } from '@krds.ui/vue'

  const count = ref(0)
</script>

<template>
  <KrdsQuantityToggle v-model="count" label="증명서 발급 수" :max="5" vertical />
</template>

접근성 ​

  • 수량 값은 WAI-ARIA spinbutton입니다. Tab으로 수량 값에 초점을 옮긴 뒤 ↑/↓로 1씩, Home/End로 최솟값/최댓값을 고릅니다.
  • −/+ 버튼은 키보드 조작과 기능이 겹쳐 탭 순서에서 빠지고, 누르면 초점이 수량 값으로 옮겨져 화면낭독기가 바뀐 값을 읽습니다.
  • 레이블은 생략하지 않습니다. 화면에서 숨겨야 하면 hide-label을 지정합니다(화면낭독기는 읽음).

KrdsQuantityToggle ​

Props

이름타입기본값설명
idstring-수량 값(spinbutton) 요소 ID
disabledbooleanfalse비활성화 여부
modelValuenumber-수량 (없으면 최솟값)
hideLabelbooleanfalse레이블을 화면에서 숨김 (화면낭독기는 읽음)
maxnumber10최댓값 (KRDS 가이드: 기준값 포함 11단계 이내)
minnumber0최솟값
verticalbooleanfalse세로형 (+ 버튼이 위)
label (필수)string-레이블 (어떤 수량을 고르는지 안내)

Events

이름인자설명
change[value: number]버튼·키보드로 수량을 바꿨을 때
update:modelValue[value: number]수량이 바뀔 때 (v-model)