TextField

Structure

The TextField component is built using a native HTML <input> element. The input is wrapped within a FormControl component that manages the association between the input and its <label>, description, and error message elements using generated IDs.

The optional clear button and password visibility toggle are built with native <button> elements.

ARIA

table

Element	Attribute	Description
Clear button	aria-label="Clear field"	Provides an accessible name for the icon-only clear button.
Field	aria-describedby	References assistive text that describes the field.
Field	aria-label	Provides an accessible name when no visible label is rendered.
Field	aria-labelledby	References the visible label element's ID. When an ariaLabelledby prop is also provided, both IDs are included.
Password visibility button	aria-label	Set to "Show password" when the password is hidden, or "Hide password" when the password is visible.
Spinner	aria-label="Loading…"	Provides an accessible name for the loading spinner.

Placeholders

Placeholders help the user complete a form control by providing a hint on how the control expects its value to be formatted. This gives the user immediate, visual instruction to prevent future errors.

However, it's become commonplace in design trends to use placeholders in place of traditional labels. Never use a placeholder in place of a label. They are not reliably announced to assistive technology meaning some users may miss context on what the purpose of the label is.

We highly recommend adding visible labels with the label prop to prevent this lapse in communication. If a visible label is unneeded for the use case, add an ariaLabel or ariaLabelledby so assistive technology will announce the TextField to the user. Omitting a label will result in an error.

Keyboard

Field

table

Key	Function
Shift+Tab	Moves focus to the previous focusable element.
Tab	Moves focus to the next focusable element.

Buttons

table

Key	Function
Enter/Space	Activates a focused button.