shadcn.io is not affiliated with official shadcn/ui
Button Group examples · Advanced
Stepper Button Group for React
Two steppers with a number field between down and up buttons, stepping a quantity by 1 and a price by 10.
A number field with step buttons on both sides. The quantity steps by 1 and the price by 10, neither going below 0, and both can be typed into directly. The Input sits inside the ButtonGroup, so it shares the buttons' borders.
Preview
Installation
FAQ
How are the values tracked?
Each stepper keeps a number, 1 and 100. Down subtracts the step and stops at 0, up adds it, and typing in the field stores the typed number.
How are the chevron buttons named?
Each has an aria-label, such as Decrease quantity or Increase price, and size="icon-md". The fields have aria-labels too, Quantity and Price.
What happens if someone types a negative number?
It's stored as typed; only the buttons stop at 0. Add min to the input and clamp the typed value if negatives aren't allowed.
What happens when the field is cleared?
An empty field is stored as 0, since the demo converts the text to a number. Keep the raw text if you need to tell empty from 0.
Is there a component for this?
Yes. Number Input handles typing, limits, steps and keyboard increments in one component.
Related
- Quantity Picker Button GroupTwo quantity pickers with minus and plus
- Button Group with SelectCompound fields that join a select to
- Input with LabelA text input with a label above it
- Simple SliderA single-thumb slider with no label or
- Basic Button GroupThree rows of outline buttons joined into
- Rich Text Toolbar Button GroupA rich text toolbar of icon buttons where