Text field Preview
A text field lets people enter short, free-form text data.
Text fields don’t limit the amount of text that someone can enter, but they don’t respond to accommodate long text. For long inputs, like comments, try the native text view.
Resources
Behavior
Focus hints
In its rest state, text fields use neutral colors. When the field is selected and editable, the field recolors to brand colors as a visual indication that it’s in focus. A trailing button to clear text will appear immediately, as long as the field is in focus. If an entry is input into the text field, the clear text button will persist, even when the field is no longer in focus. If no entry is made and the field loses focus, the clear text button will disappear.
Validation and errors
Text fields can be set to validate input after each character, once the field loses focus, or on press of the return key. Choose the validation type that makes the most sense for the data you’re asking for. For example, if the text field expects specific content, like requirements for a password or choosing an available username, flag errors immediately. But in instances where an expected character may come later in the input, like an @ when entering an email, validate after the field loses focus or when the return key is pressed.
If there are errors, use the optional FluentTextInputError object to communicate what’s gone wrong. The visual styling of the field will change to reflect an error state and a message will appear to let people know how to fix the problem.
Don’t show errors too early
Accessibility
Text field label
It can be confusing to see a text field with no label. To avoid scenarios where people are unsure of the information they need to provide, opt to use the optional text field label in most cases.
Content
Labels
Labels briefly tell someone what they need to put in the field. Usually, a short phrase works best. Don’t use full sentences or instructional text in labels.
Placeholder text
Use placeholder text as an extra hint what people should enter. For example, “Search for keywords, file names, or people” expands on a “Search” label.
Don’t put necessary information in placeholder text because it will disappear as soon as someone starts entering their own input. Skip the period in placeholder text.
Helper text
Use helper text to explain accepted values or required formats. For example, “MM/DD/YYYY” defines the required format for a date input.
