Adjust counts without a keyboard
The increment and decrement buttons let users change a quantity directly — no need to clear and retype a number.
Quantity toggle
The quantity toggle component is used to increase or decrease an incremental value.
Storybook
components/quantity-toggle
components/quantity-togglePrevent invalid values
Min and max constraints are built in, so users can't accidentally enter a quantity outside the allowed range.
Fits naturally in transactional flows
Use quantity toggles in booking or order screens where users need to set a number as part of completing a task.
1
Decrement action
2
Input value
3
Increment action
Default
The quantity toggle provides increment and decrement controls for adjusting a numeric value within a defined range.
Renders increment and decrement buttons around a numeric input. Use when users need to adjust a count in clear, bounded steps — such as a booking quantity or item count.
Component tokens
Component tokens are specific to each component. Use the table title as the prefix: form-gap-lg under sgds/quantity-toggle means sgds/quantity-toggle/form-gap-lg.
sgds/quantity-toggle
sgds/form/gap/lgWhen to use
- Use this component to collect or change a specific piece of information in a predictable way.
- Use it when the SGDS control matches the type of response users need to provide.
When not to use
- Do not use this component when another SGDS control would reduce effort or make the choice clearer.
- Do not ask for more information, options, or steps than users need at that point in the task.
Keep the input clear
Use clear labels, predictable values, and a single obvious action for the control.
Do not increase input effort
Too many repeated controls or unclear prompts make form completion slower and less confident.
Built-in accessibility
- Quantity toggles combine an input with increase and decrease icon buttons.
- The input restricts unsupported keys and allows numeric editing keys.
Labels and content
- Use a label that describes what quantity is being changed.
- Set sensible minimum, maximum, and step values.
Focus and interaction
- Users should be able to reach the decrease button, input, and increase button in order.
- Validation feedback should explain any minimum or maximum constraint.
TabShift+TabNumber keysBackspace↓ Downor↑ Upor← Leftor→ RightHave suggestions or feedback?
Share them with us on
Found a bug or issue?
Report it on GitHub
Singapore Government Design System
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.