Text Input
Text Inputs are used to collect text-based input via a keyboard. They allow users to enter and edit text within a rectangular box. Text inputs enable users to enter free-form text data and can be used for both long and short-form entries.
Anatomy
Text Input anatomy.
Label: It is the input's title. It should be as concise as possible and clearly convey the purpose of the input.
Leading icon: An icon that reinforces the purpose of the input appears before the input's value.
Text: The content entered by the user into the field.
Trailing icon: The same as a leading icon, but appears after the input's value.
Caption: Provides additional context about the field to help users fill in the correct data or explain how the data will be used. Caption text should be as short as possible. The caption can be optionally visible.
Sizes
A text input can be resized based on the context in which it is used.
Text Input sizes.
You can make the input smaller if it is placed in a tight space with other small elements. Conversely, you can make the input larger if it is in an open space or feels out of proportion with larger adjacent elements.
States
Text Input states.
Enabled: When a text input is active but not being directly interacted with by the user, it is commonly referred to as the default or normal state of the component.
Hover: A hover state communicates when a user has placed a cursor above a text input.
Focus: When a user clicks on the text input, it becomes focused, indicating successful navigation to the component.
Error: This state occurs when the user input is invalid or a required text input is not filled in. A user response is required before data can be submitted or saved.
Success: This state occurs when the user input is valid, such as when choosing a username during website registration.
Disabled: When the user cannot interact with a component, and all interactive functions have been disabled.
