Text Input

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

Motion Functions

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.


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.

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).

Last updated