NumberInput
NumberInput provides a numeric field with step controls and optional formatting.
Source
LLM docs
Package
Examples
5
Properties
117
Playground
Basics
Keep the number in state with
value and onChange; min stops it from going below zero.Loading demo…
import { useState } from 'react';
import { NumberInput } from '@plocks/ui';
export function Demo() {
const [quantity, setQuantity] = useState<number | undefined>(2);
return (
<NumberInput
label="Quantity"
placeholder="Enter amount"
value={quantity}
onChange={setQuantity}
min={0}
/>
);
}Formats
Set
format to currency or percentage to show the currency symbol or percent sign once the field loses focus; decimalScale with fixedDecimalScale pins the decimal places.Loading demo…
import { Block, NumberInput } from '@plocks/ui';
export function Demo() {
return (
<Block>
<NumberInput
label="List price"
defaultValue={249.99}
format="currency"
decimalScale={2}
fixedDecimalScale
/>
<NumberInput
label="Discount"
defaultValue={10}
format="percentage"
/>
</Block>
);
}Variants
Compare the default, filled, outline, and unstyled field shells on NumberInput.
Loading demo…
import { Column, NumberInput } from '@plocks/ui';
const variants = ['default', 'filled', 'outline', 'unstyled'] as const;
export function Demo() {
return (
<Column gap="md" fullWidth>
{variants.map(variant => (
<NumberInput key={variant} variant={variant} label={`${variant} variant`} placeholder="Enter a quantity" />
))}
</Column>
);
}Side buttons
withSideButtons puts decrement and increment buttons on either side of the field. Hold Shift while pressing to step by shiftMultiplier (10 by default) for coarse adjustments.Loading demo…
import { NumberInput } from '@plocks/ui';
export function Demo() {
return (
<NumberInput
label="Playback speed"
defaultValue={32}
min={0}
max={200}
suffix="%"
withSideButtons
/>
);
}Drag gesture
Add
withDragGesture to change the value by pressing and dragging across the field; dragAxis picks horizontal or vertical movement.Loading demo…
import { Block, NumberInput } from '@plocks/ui';
export function Demo() {
return (
<Block>
<NumberInput
label="Horizontal drag"
defaultValue={32}
withDragGesture
dragAxis="horizontal"
/>
<NumberInput
label="Vertical drag"
defaultValue={120}
withDragGesture
dragAxis="vertical"
/>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources