Quantity Input

Owned by Jesilyn Barnes (Deactivated)
Last updated: Jul 23, 2019 by Dan Flynn

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).


  1. 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

    1. Expanded (Default)
      The default quantity field is displayed as the expanded variation by default when possible. This variation always has the steppers visible.




    2. Condensed
      The condensed quantity field is displayed with the steppers hidden until the input receives focus.



  2. 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.




  3. Functionality


    If the Quantity Minimum or Quantity Maximum Value is reached, the associated stepper button becomes disabled.

    1. When the Quantity Minimum Value is reached, the minus stepper would be disabled.



    2. When the Quantity Maximum value is reached, the plus stepper would be disabled.



    3. 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

    4. When the cursor is hovered over an active stepper, the button's background changes to the secondary color 



    5. 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.



    6. 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


  4. Errors & Restrictions


    1. THE VALUE…

      1. 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.

      2. CAN NOT begin with a 0.
        Disable the ability to start a value with 0. No error needed. 

      3. CAN NOT be left blank
        If left blank, the quantity would default to the Quantity Minimum Value.




      4. 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.




      5. 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.)