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.

Autofill

TextField disables autofill by default. It sets autocomplete="off" along with opt-out attributes for the common password managers, so that they don't inject their own UI into fields where it isn't wanted.

That default has an accessibility cost, so set shouldAllowAutofill on any field that collects information about the user — name, email, address, phone, and anything credential-related. Autofill is what lets people who rely on a password manager, or who find typing long strings difficult or error-prone, complete a form at all. Suppressing it works against 1.3.5 Identify Input Purpose, and on a sign-in form it also removes the mechanism 3.3.8 Accessible Authentication expects to be available as an alternative to remembering a password.

Leave the default in place only where autofill would be actively wrong, such as a search field, a one-off code, or a field whose value is unrelated to the person filling it in.

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.