수량 토글 Quantity toggle

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

KRDS 가이드

기본

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

import { Component, signal } from '@angular/core'
import { KrdsQuantityToggle } from '@krds.ui/angular'

@Component({
  selector: 'demo-quantity-toggle-basic',
  imports: [KrdsQuantityToggle],
  template: ` <krds-quantity-toggle label="관람 인원" [min]="1" [max]="4" [(value)]="count" /> `
})
export default class QuantityToggleBasic {
  readonly count = signal(1)
}

세로형

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

import { Component, signal } from '@angular/core'
import { KrdsQuantityToggle } from '@krds.ui/angular'

@Component({
  selector: 'demo-quantity-toggle-vertical',
  imports: [KrdsQuantityToggle],
  template: ` <krds-quantity-toggle label="증명서 발급 수" [max]="5" vertical [(value)]="count" /> `
})
export default class QuantityToggleVertical {
  readonly count = signal(0)
}

접근성

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

KrdsQuantityToggle

선택자 krds-quantity-toggle

Inputs

이름	타입	기본값	설명
[(value)]	number	-	수량 (없으면 min)
label (필수)	string	-	레이블
hideLabel	boolean	false	레이블을 화면에서 숨김 (화면낭독기는 읽음)
min	number	0
max	number	10
vertical	boolean	false	세로형 (+ 버튼이 위)
disabled	boolean	false
id	string	-	수량 값 요소의 id