Example
Related
- TextArea — Use when you want to allow users to enter a sizeable amount of free-form text.
Props
Label
Every text field must have a label.
If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility.
Required
A text field can be marked as required by setting the isRequired prop.
The asterisk symbol used to visually indicate a required field is not part of the label text itself, and will not be read by assistive technology.
Description
The description communicates a hint or helpful information, such as specific requirements for correctly filling out the field.
Error message
The errorMessage communicates validation errors when field requirements aren’t met. Prompting the user to adjust their input.
Disabled
A text field can be disabled by setting the isDisabled prop. This can be used to maintain layout continuity and communicate that a field may become available later.
Read only
The isReadOnly prop makes a field’s text content immutable. Unlike isDisabled, the field remains focusable and the contents can still be copied.
Patterns
Help text punctuation
Help text (e.g. descriptions and error messages) should be written as a complete sentence, with a period at the end. This is to ensure that assistive technology pauses at the end of each block of text, making it easier to understand for the user.
<TextField label="Name" description="This is the name that will appear on your account." errorMessage="This field is required."/>Avoid placeholder text
Putting instructions for how to complete a field, requirements, or any other essential information into placeholder text is not accessible. Instead, use the description to convey requirements or to show any formatting examples that will aid user input.