Quantity input

Quantity inputs are similar to text inputs but contain controls used to increase or decrease an incremental value.

Known issues

Show details

The quantity input component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.

Quantity input usage in Carl's Shop +

Component	Usage	Placement	User action
Quantity input	When incremental additions need to be made. Adding to the cart is a great use case.	Inside the container. In the e-commerce context, it should be next to the Buy/Add to cart button	Increase, decrease or insert number manually

If the user does not need to increase or decrease the quantity, consider other interface options, e.g. chips or dropdowns.

Anatomy

Property	Values	Description
Size	small medium large	height: 32px, 40px, and 48px.
State	active disable	---