shadcn.io is not affiliated with official shadcn/ui
Input examples · Types
Number Input with Controls for React
A quantity field between minus and plus buttons that step it by one.
Plus and minus buttons are quicker than typing for small numbers. This example puts outline icon buttons on either side of a centered number input; minus stops at 1, and plus has no limit. People can still type a quantity. Use it for cart quantities, guest counts and seat selection.
Preview
Installation
FAQ
How do the buttons change the number?
The quantity lives in state, starting at 1. Minus lowers it by one but never below 1; plus raises it by one with no upper limit.
Can people type the quantity?
Yes. The input is type number with min 1, and what's typed is converted to a number and stored. text-center centers the digits between the buttons.
How do screen readers know what the buttons do?
They show only an icon, MinusIcon or PlusIcon with aria-hidden, so each has an aria-label: Decrease quantity and Increase quantity.
How are the buttons styled?
variant outline and size icon-md, square buttons matching the input's height, in a row with gap-2. They're type button, so pressing one never submits a form.
Is there a ready-made number field?
Yes. Number Input has increment and decrement controls, clamping, step and formatting built in. This example builds the pattern from an Input and two Buttons.
Related
- Range Slider with Value InputA range input with its current value
- Currency InputAn amount field with a dollar sign inside
- Button with Text (Standard)The one filled action
- Input with LabelA text input with a label above it
- Search Filter FormA product search form with a query, a
- Search InputA search field with a magnifier icon