Text fields on web pages are probably one of the most commonly used interface components. They are used to fill out contact forms, enter payment details, create an account (online registration), lead generation, login forms, etc., that is, they solve the problem of organizing interaction with site visitors.
The purpose of this article is to highlight some key guidelines to help you get the right design for text boxes. We are considering exclusively the issue of layout, there will not be any additional tutorials on layout here. The publication is an adapted translation of this note.
State of the text box
Text field elements can be displayed in the following states: base, hover, active, inactive, error. Each of these situations must be accompanied by appropriate visual cues so that the user can easily identify them. This approach greatly simplifies the usability of your product.
Basic
This is the default display of the text box, i.e. while the person has not yet begun to interact with it, but it is already ready to work.
Helping out Studio to Develop
