Components
Textfield
Used to enter spesific text input form
Anatomy
Text Fields allow users to enter and edit text content into a UI. They typically appear in forms.
- Container : selection control (input) that can be selected or unselected, and pushed into different states.
- Label : indicates what you want the user to input in the text field.
- Input Container : interactive input area.
- Icon : Used to add a component to the start or the end of the input container.
- Suffix and Prefix : this is an optional form of text field. To help user indicate the type of information that should be entered in the field such as currency, unit of measurement, etc.
- Caption : this is also optional form of text field. Provides contextual assistance like popovers, placeholder text, or helper text, in any area where the user might need additional information to provide the right input.
Do : With label
Use fields of the same size in a form
Don't : Without label
Don’t vary the sizes of fields in a form
Usage
Text field should be used when the requested input text is expected to fit within the width of the inline field. Otherwise, the input text will become hidden behind a vertical scroll which can create frustration
Common places textfield appear: Forms, Filter
When to use
- When the expected input is short.
- To gather basic information from users.
- To specify what kind of data users can enter.
When not to use
- You have multiple related fields.
- You want longer responses from users.
- You want users to upload a file.
Accessibility
A text field is a rectangular area in which people enter or edit small, specific pieces of text. When the Text Field text is too long for the available horizontal space, the text truncates when text is inputted. Avoid using the Text Field if you need to let users enter longer answers that might span multiple lines.
Do : With supporting text
Use helper text to explain why an error occurred and how it's fixed
Don't : Without supporting text
Let user see error indicator without displaying helper text
Content
When creating Text Fields :
- Validate fields when it makes sense.
- Use a number formatter to help with numeric data.
- Show a hint in a text field to help communicate its purpose.
- Use secure text fields to hide private data. Always use a secure text field when your app asks for sensitive data, such as a password.
- Use error and help messages to guide users before they enter anything and clear calm error messages when there’s a problem with what they entered.
Do : For short text input
Use text fields for gathering small amount of text of information
Don't : For long text input
Use text fields to gather vast amount of text of information
Do : With short label
Input labels and placeholder text should be in sentence case
Don't : With long label
Input label text shouldn't be truncated or wrap over two or more lines
Do you have feedback?
Please let us know to make it better