NumberField
A number input with increment/decrement buttons, built on Base UI’s NumberField primitive.
Base UI Primitive
Built on @base-ui/react/number-field
Import
import { NumberField } from "@soft-ui/react/number-field"
Usage
import { NumberField } from "@soft-ui/react/number-field"
export default function Example() {
return (
<NumberField.Root defaultValue={0} min={0} max={100}>
<NumberField.Group>
<NumberField.Decrement />
<NumberField.Input />
<NumberField.Increment />
</NumberField.Group>
</NumberField.Root>
)
}
Components
NumberField.Root
size
's' | 'm' | 'l'
default:"'m'"
Control size.
s: 32px heightm: 36px heightl: 40px height
Uncontrolled default value.
Callback fired when value changes.
Step increment/decrement amount.
Step amount for Shift+Arrow keys.
Disables the number field.
Makes the field required.
Name attribute for form submission.
Escape hatch for structural overrides.
NumberField.Group
Container for input and buttons.
Only show focus ring on keyboard navigation.
Escape hatch for structural overrides.
NumberField.Increment
Button to increment value.
Custom icon. Defaults to plus icon.
Escape hatch for structural overrides.
NumberField.Decrement
Button to decrement value.
Custom icon. Defaults to minus icon.
Escape hatch for structural overrides.
NumberField.ScrubArea
Makes an element draggable to change value.
NumberField.ScrubAreaCursor
Custom cursor for scrub area.
Examples
Basic
import { NumberField } from "@soft-ui/react/number-field"
export default function Basic() {
return (
<NumberField.Root defaultValue={0} min={0} max={100}>
<NumberField.Group>
<NumberField.Decrement />
<NumberField.Input />
<NumberField.Increment />
</NumberField.Group>
</NumberField.Root>
)
}
Sizes
import { NumberField } from "@soft-ui/react/number-field"
export default function Sizes() {
return (
<div className="flex flex-col gap-4">
<NumberField.Root size="s" defaultValue={0}>
<NumberField.Group>
<NumberField.Decrement />
<NumberField.Input />
<NumberField.Increment />
</NumberField.Group>
</NumberField.Root>
<NumberField.Root size="m" defaultValue={0}>
<NumberField.Group>
<NumberField.Decrement />
<NumberField.Input />
<NumberField.Increment />
</NumberField.Group>
</NumberField.Root>
<NumberField.Root size="l" defaultValue={0}>
<NumberField.Group>
<NumberField.Decrement />
<NumberField.Input />
<NumberField.Increment />
</NumberField.Group>
</NumberField.Root>
</div>
)
}
With Constraints
import { NumberField } from "@soft-ui/react/number-field"
export default function WithConstraints() {
return (
<NumberField.Root
defaultValue={5}
min={0}
max={10}
step={0.5}
>
<NumberField.Group>
<NumberField.Decrement />
<NumberField.Input />
<NumberField.Increment />
</NumberField.Group>
</NumberField.Root>
)
}
With Scrub Area
import { NumberField } from "@soft-ui/react/number-field"
export default function WithScrubArea() {
return (
<NumberField.Root defaultValue={50}>
<NumberField.ScrubArea>
<span>Drag to adjust</span>
</NumberField.ScrubArea>
<NumberField.Group>
<NumberField.Decrement />
<NumberField.Input />
<NumberField.Increment />
</NumberField.Group>
</NumberField.Root>
)
}