shadcn.io is not affiliated with official shadcn/ui
Button Group examples · Forms
Quantity Picker Button Group for React
Two quantity pickers with minus and plus buttons around the count, the minus button disabled at zero.
The plus and minus control next to a product in a cart. ButtonGroupText shows the count between two icon buttons, starting at 1 in the first picker and Qty: 5 in the second. Minus turns off at zero so the count can't go negative.
Preview
Installation
FAQ
How are the two quantities tracked?
Each picker has its own value, 1 and 5. Minus subtracts one, never below 0, and plus adds one with no upper limit.
How are the icon buttons named?
Each has an aria-label, Decrease quantity or Increase quantity, and size="icon-sm". The icons have aria-hidden="true".
Is the new count announced?
Yes. The ButtonGroupText has aria-live="polite", so a screen reader reads the number after it changes.
Can people type a number?
Not here; the count is text. The Stepper Button Group puts an input between the buttons, and Number Input handles typing, limits and steps in one component.
Related
- Stepper Button GroupTwo steppers with a number field between
- Cart Button Button GroupA cart button with an item count badge on
- Volume Controls Button GroupVolume controls with a mute toggle and
- Input with LabelA text input with a label above it
- Basic Button GroupThree rows of outline buttons joined into
- Date Selector Button GroupA date range picker with presets from