Text Input

Text input allows for users to enter text into an interface.

Motion Functions

Guidance Function

Feedback Function

The function of motion in a text input is Guidance. Motion helps guide users as to where the text can be input and when it is ready to accept it. Additionally, motion provides feedback to the user by displaying input information.

Examples

TextField Interaction by Oleg Frolov

Name Field designed by Khrystyna

In the above examples, the text field is first displayed in a state visible to the user as an input field where they can input the text. Once they click on the field, the state changes to show the users that they can type into it. Motion supports this state change by using principles of transformation and masking to alter the text box's shape and make the cursor blink, drawing attention to its change of state.

Search micro interaction by Jimmy Rodenburg

Password field animation by Aaron Iker

Similarly, In the example on the left, the search icon transforms into a cursor, letting the user know that the input field relates to the search bar and that any text input will be used as keywords for a search. In the one on the right, the password field shows whether it is active by displaying a colored border. Additionally, a password field has a visible and hidden state that needs to be triggered by the user. (The icon to trigger this action follows similar functions and principles as an icon button).