Skip to main content


Inputs are the most basic component for capturing and submitting user data.


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

StatesSub States
Input StateInput Substate


Input demo


  • Use inputs when the user needs to provide value to the form.
  • Avoid using inputs that trigger immediate change: a page refresh.
  • Label: Labels in an input field informs the user what the field is used for.
  • Required: Required option in an input informs the user if the field is mandatory.
  • Placeholder: Placeholders in addition to labels allows providing additional information to the user in regards to what the input field is being used for.
  • Inline Message: These messages are displayed upon the validation of the input fillled ideally an error message is displayed on a much frequent basis.
  • Help Text: Help Text provide user with further explanantion of the input field. Help text can be a small paragraph.

When to use

  • Use Inputs when the user has to put in a value inside a form.


Input demo

Designer assets

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact GEL Community.

Developer API

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