TextField

Forms

Overview

A text field associated with a label, optional hint, a 2px input edge, radius and the focus-halo on focus.

Live example

Usage

• Always a visible label. Mark a required field with required; the asterisk is destructive and hidden from assistive technology because the required attribute is already set on the input.
• hint and error are linked through aria-describedby. Explain the fix in the error: "Enter an email address, such as name@example.com.", not "Invalid".
• An invalid field turns its edge destructive and sets aria-invalid. The error text should be always visible until the user addresses it.
• Minimum height 44px. The edge is input, at least 3:1 against background.

Accessibility

This section is still in progress.

Related

• Form Fields

References

This section is still in progress.