Spin Button

숫자를 직접 입력하거나 증가·감소 버튼으로 바꿉니다.

용법

정수

정수 입력을 받고 증가·감소 제어 기능을 제공합니다.

Team seatsAdjust the number of seats included in this workspace.4 seats

Allowed range: 0–20 · Step 1

<!-- Spin Button / Integer -->
<script setup lang="ts">
import { ref } from 'vue'
import { SpinButtonDecrement, SpinButtonIncrement, SpinButtonInput, SpinButtonRoot } from '@sectile/vue/spin-button'

const value = ref('4')
</script>

<template>
  <SpinButtonRoot v-model="value" min="0" max="20" step="1">
    <SpinButtonDecrement aria-label="Decrease">−</SpinButtonDecrement>
    <SpinButtonInput />
    <SpinButtonIncrement aria-label="Increase">+</SpinButtonIncrement>
  </SpinButtonRoot>
</template>

외부 상태 관리

현재 값은 부모가 관리하고, 허용된 변경을 컴포넌트에 다시 전달합니다.

Release offsetFine-tune the offset in exact half-step increments.1.5 points

Allowed range: -10–10 · Step 0.5

<!-- Spin Button / Controlled -->
<script setup lang="ts">
import { ref } from 'vue'
import { SpinButtonDecrement, SpinButtonIncrement, SpinButtonInput, SpinButtonRoot } from '@sectile/vue/spin-button'

const value = ref('1.5')
</script>

<template>
  <SpinButtonRoot v-model="value" min="-10" max="10" step="0.5">
    <SpinButtonDecrement aria-label="Decrease">−</SpinButtonDecrement>
    <SpinButtonInput />
    <SpinButtonIncrement aria-label="Increase">+</SpinButtonIncrement>
  </SpinButtonRoot>
</template>

예시

입력 복구

수량을 직접 입력하고 잘못된 값을 입력한 채 벗어나면 마지막으로 확정한 값으로 복구합니다.

Retry limitEnter a whole number. Leaving an invalid edit restores the saved quantity.10 retries

Allowed range: 0–20 · Step 1

<!-- Spin Button / Invalid Draft -->
<script setup lang="ts">
import { ref } from 'vue'
import { SpinButtonDecrement, SpinButtonIncrement, SpinButtonInput, SpinButtonRoot } from '@sectile/vue/spin-button'

const value = ref('10')
const draft = ref<string | null>(null)
</script>

<template>
  <SpinButtonRoot v-model="value" min="0" max="20" step="1" @update:draft="draft = $event">
    <SpinButtonDecrement aria-label="Decrease">−</SpinButtonDecrement>
    <SpinButtonInput />
    <SpinButtonIncrement aria-label="Increase">+</SpinButtonIncrement>
  </SpinButtonRoot>
  <p v-if="draft !== null">Leaving an invalid edit restores {{ value }}.</p>
</template>

API

Vue 패키지: @sectile/vue/spin-button

컴포넌트

SpinButtonRoot
SpinButtonInput
SpinButtonIncrement
SpinButtonDecrement

Props

`SpinButtonRootProps`

as: 타입PrimitiveAs기본값'div'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
defaultDraft: 타입string | null기본값null
컴포넌트가 관리하는 편집 초깃값입니다.
defaultValue: 타입number | string기본값undefined
컴포넌트가 값을 관리할 때 사용할 초깃값입니다.
disabled: 타입boolean기본값false
사용자 조작을 막을지 여부입니다.
draft: 타입string | null기본값undefined
확정 전 편집 중인 외부 제어 문자열입니다.
label: 타입string기본값undefined
보조 기술이 읽는 컨트롤 이름입니다.
max: 타입number | string기본값필수
컴포넌트가 받을 수 있는 최댓값입니다.
min: 타입number | string기본값필수
컴포넌트가 받을 수 있는 최솟값입니다.
modelValue: 타입number | string기본값undefined
부모가 상태를 관리할 때 사용할 현재 값입니다.
pageStep: 타입number기본값10
Page Up과 Page Down이 사용할 큰 증감 간격입니다.
policies: 타입SpinButtonOptions['policies']기본값undefined
검증, 이동, 선택 동작을 조정하는 정책입니다.
readonly: 타입boolean기본값false
값 확인만 허용하는 읽기 전용 상태 여부입니다.
step: 타입number | string기본값1
컴포넌트가 받을 수 있는 최소 증감 간격입니다.

`SpinButtonInputProps`

as: 타입PrimitiveAs기본값'input'
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값false
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.
form: 타입string기본값undefined
컨트롤을 연결할 네이티브 form 요소의 ID입니다.
name: 타입string기본값undefined
네이티브 폼 제출에 사용할 이름입니다.
required: 타입boolean기본값false
제출 전에 올바른 값이 반드시 있어야 하는지 여부입니다.

`SpinButtonTriggerProps`

as: 타입PrimitiveAs기본값undefined
이 파트가 렌더링할 요소 또는 컴포넌트입니다.
asChild: 타입boolean기본값undefined
하나뿐인 자식 요소에 파트 속성을 직접 합칠지 여부입니다.

슬롯

`SpinButtonSlotProps`

disabled: 타입boolean
사용자 조작을 막을지 여부입니다.
draft: 타입string | null
현재 편집 중인 입력 문자열입니다.
readonly: 타입boolean
값 확인만 허용하는 읽기 전용 상태 여부입니다.
text: 타입string
현재 값을 표시한 문자열입니다.
value: 타입string
이 계약이 노출하는 현재 값입니다.

이벤트

`SpinButtonRoot`

update:draft: 페이로드string | null
편집 중인 입력 문자열이 바뀔 때 발생합니다.
update:modelValue: 페이로드string
컴포넌트가 외부 제어 값의 변경을 요청할 때 발생합니다.

기타 타입

`SpinButtonValueChangeHandler`

type SpinButtonValueChangeHandler = (value: string) => void

`SpinButtonDraftChangeHandler`

type SpinButtonDraftChangeHandler = (value: string | null) => void

파트

공통 범위: [data-scope="spin-button"]. 컴포넌트 내부로 스타일을 제한할 때 파트 선택자와 함께 사용합니다.

파트	선택자	역할	추가 속성
`root`	`[data-part="root"]`	컴포넌트 경계와 내부 파트를 묶습니다.	—
`input`	`[data-part="input"]`	편집 값이나 초안을 입력받습니다.	—
`increment`	`[data-part="increment"]`	설정된 한 단계만큼 값을 늘립니다.	—
`decrement`	`[data-part="decrement"]`	설정된 한 단계만큼 값을 줄입니다.	—

키보드 동작

키	동작
`Arrow Right` / `Arrow Up`	값을 한 단계 증가시킵니다.
`Arrow Left` / `Arrow Down`	값을 한 단계 감소시킵니다.
`Home` / `End`	최솟값 또는 최댓값으로 이동합니다.
`Page Up` / `Page Down`	지원되는 경우 설정된 큰 단계만큼 값을 바꿉니다.

접근성

입력란이 증감 입력 값 정보를 노출하고 증가·감소 요소는 이름이 있는 기본 컨트롤로 유지됩니다.

관련 WAI-ARIA 패턴에서 호스트 접근성 규칙을 확인할 수 있습니다.

Spin Button ​

용법 ​

정수 ​

외부 상태 관리 ​

예시 ​

입력 복구 ​

API ​

Props ​

SpinButtonRootProps ​

SpinButtonInputProps ​

SpinButtonTriggerProps ​

슬롯 ​

SpinButtonSlotProps ​

이벤트 ​

SpinButtonRoot ​

기타 타입 ​

SpinButtonValueChangeHandler ​

SpinButtonDraftChangeHandler ​

파트 ​

키보드 동작 ​

접근성 ​