Text Input Guidelines

The Text Input component is our basic text input element. It allows users to enter a single line of text, which can contain letters, numbers, and symbols.

Best Practices

Do:

• Use Text Input as part of the Field component to easily add labels, helper tooltips, messages, etc.
• Provide a placeholder text that describes what the user should type in the field, e.g. "Type username here". See UI Text Guidelines for more details on good placeholder text.

Avoid:

• Avoid using the placeholder as a label.
• Avoid using it when the user needs to enter text more than a few words. For longer text input, use Textarea.
• Avoid using Text Input for use-cases we have a special input for, e.g. Number Input, Date Picker, etc.