Screen readers convey information about text fields automatically through native HTML.
- Use the
disabled prop to add the HTML
disabled attribute to the text field.
- Use the
readOnly prop to add the HTML
readonly attribute to the text field.
- If you use the
type prop, then some assistive technologies adapt the software keyboard to the current task. This helps merchants with mobility, vision, and cognitive issues to enter information more easily.
id prop to provide a unique
id attribute value for the text field. If you don't provide an
id, then the component generates one automatically. All text fields need to have unique
label prop is required to convey the purpose of the checkbox to all merchants.
If there are separate visual cues that convey the purpose of the text field to sighted merchants, then the label can be visually hidden with the
When you provide help text via the
helpText prop or an inline error message via the
error prop, the help or error content is conveyed to screen reader users with the
aria-describedby attribute. This attribute causes the content to be read along with the label, either immediately or after a short delay.
placeholder prop to provide additional instructions. However, don’t rely on placeholders alone since the content isn’t always conveyed to all merchants.
- Use the label to provide instructions critical to using the text field
- Use help text and placeholder text to provide additional, non-critical instructions
Use the placeholder to provide information that’s required to use the text field.
Text fields have standard keyboard support.
- Merchants who rely on the keyboard expect to move focus to each text field using the tab key (or shift + tab when tabbing backwards)
- If the
type is set to
number, then merchants can use the up and down arrow keys to adjust the value typed into the field
- Using the
disabled prop will prevent the text field from receive keyboard focus or inputs
readOnly prop allows focus on the text field but prevents input or editing
inputMode prop can be used to bring up a relevant keyboard for merchants on mobile; it’s passed down to the input as an
Although you can use the
autoFocus prop to automatically move focus to the text field, it’s generally best to avoid focusing on fields automatically. The
autoFocus prop is set to
false by default and should only be used in cases where it won’t force focus to skip other controls or content of equal or greater importance.
- Use the
ariaOwns props (which implement the
aria-owns attributes) to point to the
id of the autocomplete list.
- Use the
ariaAutocomplete prop to indicate what kind of
aria-autocomplete input is provided, either
list is used.
- When merchants navigate through the list, the
ariaActiveDescendant prop indicates which option has programmatic focus so that it can be conveyed to screen reader users.
To learn more about implementing a text field with autocomplete, see the autocomplete component.