Browse components
Input
Interactive input components for quantities, settings, and structured values.
Labeled React number input with an optional unit, stacked controls, bounds, and empty values.
Accessible React search bar with highlighted results, keyboard navigation, and polished loading and empty states.
A six-digit PIN input with paste support and keyboard navigation for verification codes.
A vertical range input with configurable value labels, thumb shapes, colors, and height.
A premium search input with a focused state and an icon that becomes a submit action as you type.
A minimalist input spinner for choosing quantities with buttons, typing, or arrow keys.
About Input Components
Input components help people enter and adjust structured values without adding unnecessary form complexity. This collection covers focused controls such as numeric steppers and quantity selectors.
Use native input behavior where possible, keep labels visible, and set clear limits when a value has a meaningful minimum or maximum.
Frequently asked questions
What is an input spinner?
An input spinner is a numeric field with increment and decrement controls. It is also called a number input, quantity selector, or numeric stepper.
Where can I use an input spinner?
Input spinners work well for quantities, guest counts, team seats, dimensions, pricing options, and settings with a known numeric range.
Can an input spinner be used with a keyboard?
Yes. People can type a value directly or focus the number field and use the arrow keys to increase or decrease it.