Text Field

(Also called text input or text box)

Best Practices

Design

• Don’t rely only on color to indicate the state of the text field. Use a different border color or a different icon to indicate the state of the text field.
• Avoid using an icon signifiying an error state inside a text field. It’s easier to establish a common pattern for all input fields. For example: inputs type=file don’t contain text, it’s usually represented by a button. A password field has usually an eye icon on the right of the input. A date field has usually a calendar icon on the right of the input. A search field has usually a clear icon on the right of the input.

Anatomy

1. Label
2. Input
3. Placeholder
4. Helper text
5. Validation message

Resources

References

• https://uxdesign.cc/text-fields-forms-design-ui-components-series-2b32b2beebd0