Number Field

A number input component with increment and decrement buttons. Supports controlled and uncontrolled modes, min/max values, step increments, and keyboard navigation.

Installation

npx shadcn@latest add https://spoke.georgedrury.co.uk/r/number-field

Lineage

Spoke

Anatomy

import {
	NumberField,
	NumberFieldDecrement,
	NumberFieldIncrement,
	NumberFieldInput,
} from "@/registry/spoke/number-field"

export default () => (
	<NumberField defaultValue={0} min={0} max={100} step={1}>
		<NumberFieldDecrement />
		<NumberFieldInput />
		<NumberFieldIncrement />
	</NumberField>
)

Usage

Uncontrolled

<NumberField defaultValue={5} min={0} max={10}>
	<NumberFieldDecrement />
	<NumberFieldInput />
	<NumberFieldIncrement />
</NumberField>

Controlled

const [value, setValue] = useState(5)

<NumberField value={value} onValueChange={setValue} min={0} max={10}>
	<NumberFieldDecrement />
	<NumberFieldInput />
	<NumberFieldIncrement />
</NumberField>

Custom Step

<NumberField defaultValue={0} step={0.5} min={0} max={5}>
	<NumberFieldDecrement />
	<NumberFieldInput />
	<NumberFieldIncrement />
</NumberField>

Spoke utility classes

Class	Fallback chain	Description
`--number-field-radius`	`var(--radius-md)`	Border radius for number field
`--number-field`	`var(--background)`	Background colour for field
`--number-field-border`	`var(--input)`	Border colour for number field