Spin Button

󰯺󰯐

계약

Overview

Machine-readable contract from Component Spec.

component: spin-buttonexport: SpinButtonversion: 1attributes: data-refineui=spinbutton

Anatomy

Part	data-refineui
root	spinbutton
step	spinbutton-step

Variants

Axis	Values
size	sm, md, lg

States

Scope	Category	Values
component	pseudo	focus-visible
component	environment	forced-colors, dir

Accessibility

Slot	Element	Role
spinbutton	div	spinbutton

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import { SpinButton } from "@refineui/react";

<SpinButton value={quantity} onChange={setQuantity} />

<SpinButton
  value={amount}
  onChange={setAmount}
  min={0}
  max={100}
  step={5}
  placeholder="Enter amount"
  size="lg"
/>

API 레퍼런스

Prop	Default	Type	Description
value	—	number	제어형 값(필수).
onChange	—	(value: number) => void	값 변경 시 이벤트 핸들러(필수).
min	—	number	허용 최솟값.
max	—	number	허용 최댓값.
step	1	number	단계 증분.
placeholder	—	string	플레이스홀더 텍스트.
size	"md"	"sm" | "md" | "lg"	컨트롤 높이 티어.
disabled	false	boolean	인터랙션을 비활성화합니다.