Quantity Input
Quantity inputsย are form elements used to enter numeric values, primarily to adjust the quantity of products or items.
Definitions
Quantity Minimum Value:
The smallest quantity allowed to be ordered.
Example: If a requirement such as "Order in multiples of 100" was set, then the Quantity Minimum Value would be 100
Quantityย Maximum Value:
The largest quantity allowed to be ordered.
Example: If a requirement such as "Order in multiples of 100" was set for a product, then theย Quantityย Maximumย Value would be 999,900 as it's the largest value (Assuming it still accepted a max of 6 digits).
Variations
There are two variations of the quantity input field:
- Expanded - with steppers always shown
- Condensed - with steppers only visible when interacting with the input
- Expanded (Default)
The default quantity field is displayed as the expanded variation by default when possible. This variation always has the steppers visible. - Condensed
The condensed quantity field is displayed with the steppers hidden until the input receives focus.
Data
The quantity field supports up to 6 characters maximum.
The user would not be able to enter more than the max number of characters.Functionality
If the Quantity Minimum or Quantity Maximum Value is reached, the associated stepper button becomes disabled.- When the Quantity Minimum Value is reached, theย minus stepperย would be disabled.
- When the Quantity Maximum value is reached, the plus stepper would be disabled.
- The keyboardย upย โย and keyboardย downย โย arrows should increment the quantity value in the same way as the steppers.
Note: This includes applying quantity requirements such as "Order in multiples of 100".
Steppers - When the cursor is hovered over an active stepper, the button's background changes to theย secondary colorย
- When the cursor is hovered over a disabled stepper, the button's background, and icon color remain the same but theย cursor's not-allowed property is used.
- The โย andย + steppers eachย increment the quantity value by theย Quantity Minimum Value, unless disabled (see restrictions below).
Note: if a quantity restriction is applied (Example:ย "Order in multiples of 100".) and an invalid quantity is entered, then the + and - steppers would increment to the next nearest valid value. If this would result in an invalid value, then the associated stepper would be disabled.
When Quantity Minimum Value = 1
When Quantity Minimum Value = 100
- When the Quantity Minimum Value is reached, theย minus stepperย would be disabled.
Errors & Restrictions
- THE VALUEโฆ
- MUST ONLY contain digits 0-9 andย CAN NOT contain any letters or symbols.
Prevent characters other than digitsย 0-9 from being entered.ย No error needed. - CAN NOT begin with a 0.
Disable the ability to start a value with 0. No error needed.ย - CAN NOT be left blank
If left blank, the quantity would default to the Quantityย Minimum Value. - CAN NOT be less than the Quantityย Minimum Value
Display an error onblur (when the element loses focus)ย if the value is less than the Quantityย Minimum Value.
This would be prevented through the above rules if theย Quantityย Minimum Valueย is 1 but would require an error message if greater than one (Example, having the requirement of "Order in multiples of 100".)
See Messaging (UI Standards) for documentation on error messaging. - CAN NOT be greater than the Quantityย Maximumย Value
Display an error onblurย (when the element loses focus)ย if the value is greater than theย Quantityย Maximumย Value.
This would be prevented through the above rules if theย Quantityย Maximumย Value is 999,999 but would require an error message if less than 999,999 (Example, having the requirement of "Order in multiples of 100". where 999,900 would be the Quantityย Maximumย Value.)
- MUST ONLY contain digits 0-9 andย CAN NOT contain any letters or symbols.
- THE VALUEโฆ