Skip to main content

Input Number

Input numbers allows the user to input numeric value only.


There are a total of 40 variations of input number to choose from. They are primarily divided into 4 different states (Default, Active, Filled, Disabled, and Error) of inputs.

StatesSub States
Input number StateInput number Substate


Input number demo


  • Input number are similar to Input fields but only take numbers as input value.
  • When the user clicks any of the action button associated with the input field, the increased and decreased value should be reflected in the input field.
  • Note: Additional options for designers provided if you want to change the layout of the text to single input or dual(i.e. displaying Currency at all times).
  • Labels, Required, Placeholders, Inline messages and Help text guidance same as in Inputs.

When to use

  • Use for numeric input which can be increased/decreased from the action button within the input group.

When no to use

  • If the input required is alphanumeric or not entirely numeric, consider using Input or Select which is better suited for alphanumeric and non numeric values.


Input number consideration

Designer assets

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API

Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP