Spin Button

󰯺󰯐

Contract

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

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

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 Reference

Prop	Default	Type	Description
value	—	number	Controlled value (required).
onChange	—	(value: number) => void	Event handler when value changes (required).
min	—	number	Minimum allowed value.
max	—	number	Maximum allowed value.
step	1	number	Step increment.
placeholder	—	string	Placeholder text.
size	"md"	"sm" | "md" | "lg"	Control height tier.
disabled	false	boolean	Disables interaction.