TextField comes with Label built-in: just use the
label prop. We strongly encourage always supplying a label. Be sure to provide a unique
id so the Label is associated with the correct TextField.
If TextField is labeled by content elsewhere on the page, or a more complex label is needed, the
labelDisplay prop can be used to visually hide the label. In this case, it is still available to screen reader users, but will not appear visually on the screen.
When providing a validation message, make sure the instructions are clear and help users complete the field. For example, "Passwords must contain at least 20 characters". In addition, use the helper text to provide instructions to help users understand how to complete the text field or to indicate any needed input, allowed formats, timing limitations, or other pertinent information.
These practices give users of assistive technologies more information about the form, helping them to fill it out.
TextField has conventional keyboard support.
- Users relying on the keyboard expect to move focus to each TextField by using the tab key or shift+tab when moving backwards.
disabledwill prevent TextField from receiving keyboard focus or input.
TextField intentionally lacks support for autofocus. Generally speaking, autofocus interrupts normal page flow for screen readers making it an anti-pattern for accessibility.
TextField is commonly used as an input in forms alongside submit buttons. In these cases, users expect that pressing Enter or Return with the input focused will submit the form.
Out of the box, TextField doesn't expose an
onSubmit handler or individual key event handlers due to the complexities of handling these properly. Instead, developers are encouraged to wrap TextField in a
<form> with an
Be sure to localize
Whenever you want to provide more information about a form field, you should use
In some cases, the label for a TextField is represented in a different way visually, as demonstrated below. In these instances, you can set
labelDisplay="hidden" to ensure TextField is properly labeled for screen readers while using a different element to represent the label visually.
Read-only TextFields are used to present information to the user without allowing them to edit the content. Typically they are used to show content or information that the user does not have permission or access to edit.
disabled TextFields cannot be interacted with using the mouse or keyboard. They also do not need to meet contrast requirements, so do not use them to present info to the user (use
TextField can display an error message.
Simply pass in an
errorMessage when there is an error present and we will handle the rest.
Be sure to localize the text!
You can include Tag elements in the input using the
Note that TextField does not internally manage tags. Tag management should be handled in the application state through the component's event callbacks. We recommend creating new tags on enter key presses, and removing them on backspaces when the cursor is in the beginning of the field. We also recommend filtering out empty tags.
This example showcases the recommended behavior. In addition, it creates new tags by splitting the input on spaces, commas, and semicolons.
When users need to enter long amounts of text, use TextArea to ensure the full content will be shown.
For numerical input, use NumberField. Exceptions: for telephone numbers, use
<TextField type="tel" />. And for numerical input with possible leading 0's (e.g. ZIP codes), use
<TextField type="text" />.
If the input is used for searching content, use SearchField.