Input field
Input fields are user interface elements that allow users to input data and submit it for further processing.
Structure
Input fields are typically represented trough a rectangular input field. It is possible to place a label above the field, below, and/or inside it. The top label is usually used to describe the field, and the one below is common for error messages. The description inside the field is used as a placeholder.
States
The states of the input field differ mainly in the varying color of the input field frame: it becomes darker when hovering and changes to light green when clicking. The following image shows the different states of the GROW design system input fields:
Default state
Hover state
Focus state
Text input state
Disabled state
Error state
Use case
Input fields can collect valuable data, enhance user engagement, facilitate transactions, and provide a structured way for users to interact with the website or application.
Data collection: Gathering user input for various purposes, such as lead generation, user feedback, or user preferences.
User interaction: Enabling users to interact with web applications, websites, or services by submitting data or performing actions.
Facilitating transactions: Collecting necessary information from users to complete transactions, such as purchases, registrations, or bookings.
User authentication: Verifying user identities through login credentials to grant access to secure areas or services.
Best practice
When it comes to input fields, usability and accessibility, as well as the right feedback are crucial for ensuring a positive user experience.
Use the right feedback on an error
No Feedback or unclear feedback leads to irritation