Quantity Picker

E-commerce quantity selector element with increment/decrement buttons and direct input for selecting product quantities.

Note: Quantity Picker is not a dedicated CRAFT component. The properties below represent common element properties that would apply to a quantity picker implementation.

Live Preview

Code

1<div class="quantity-picker">
2  <button
3    class="quantity-picker__btn"
4    aria-label="Decrease quantity"
5    onclick="decreaseQty()"
6  >
7    <svg viewBox="0 0 24 24"><path d="M5 12h14" /></svg>
8  </button>
9
10  <input
11    type="number"
12    class="quantity-picker__input"
13    value="1"
14    min="1"
15    max="99"
16    aria-label="Quantity"
17  />
18
19  <button
20    class="quantity-picker__btn"
21    aria-label="Increase quantity"
22    onclick="increaseQty()"
23  >
24    <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>
25  </button>
26</div>

Brand Properties

Property	Type	Brand Default	HoB Value	TAE Value
Min Value	Number input	1	1	1
Max Value	Number input	99	99	99
Step	Number input	1	1	1
Default Value	Number input	1	1	1
Font	Dropdown	Open Sans	Open Sans	Open Sans
Font Size	Dropdown	14px	14px	14px
Font Weight	Dropdown	normal (400)	normal (400)	normal (400)
Text Color	Color picker	rgb(0,0,0)	rgb(0,0,0)	rgb(0,0,0)
Background Color	Color picker	rgb(255,255,255)	rgb(255,255,255)	rgb(255,255,255)
Border Style	Dropdown	solid	solid	solid
Border Width	Input	1px	1px	1px
Border Color	Color picker	rgb(0,0,0)	rgb(0,0,0)	rgb(0,0,0)
Corner Radius	Input (px)	4	4px (sm) / 8px (md)	4px (sm) / 8px (md)
Padding	Input (px)	8	8	8
Button Background	Color picker	(varies)	#038012	#1A5129
Button Text Color	Color picker	rgb(255,255,255)	rgb(255,255,255)	rgb(255,255,255)

Variants

Sizes

Small

Medium

Large

Button Styles

Text buttons

Icon buttons

States

Min reached

Disabled

Usage Context

Manjish Glow Elixir Face Oil

30ml

$49.00

$98.00

Accessibility

Use aria-label on buttons ("Decrease quantity", "Increase quantity")
Input should have aria-label="Quantity"
Disable buttons at min/max with disabled attribute
Support keyboard input for the number field
Announce value changes to screen readers

Do's and Don'ts

Do

Set sensible min/max values
Show clear visual feedback when at limits
Allow direct keyboard input for convenience
Use appropriate sizes for the context (cart vs. PDP)
Validate input and clamp to valid range

Don't

Allow negative quantities
Hide the current value
Make buttons too small to tap on mobile
Allow non-numeric input
Forget to handle edge cases (0, max)

Unmapped Brand Values

The following brand values are available but not currently mapped to Quantity Picker properties:

Brand	Token	Value
HoB	Primary Color	#038012
HoB	Border Radius (lg)	12px
TAE	Primary Color	#1A5129
TAE	Border Radius (lg)	12px

Related Elements

Button - For add to cart actions
Order Box Components - Cart and order UI