TextField

BetaBatch B. A single-line text input with a label, help text and an error message.

When to use

Use for short free text, like a name or a search term. Always give it a label. Hide the label visually only when the purpose is obvious, like a search field with a search icon.

When not to use

For a fixed set of options, use Select or Combobox. For long text, a text area is planned.

Anatomy

Annual spend

USD

Budget for the next 12 months.

Enter a number.

Label, with an asterisk when required
Box with the input
Icon before the text (optional)
Suffix, such as a unit (optional)
Help text (optional)
Error message with an icon (when invalid)

Variants

TextField options
Option	Use
icon	An icon before the text, such as Search.
suffix	Short text after the input, such as a unit.
type	Any native input type: text, email, number, search, password.

Supplier

Annual spend

USD

States

TextField states
	Default	Hover	Focus-visible	Disabled	Read-only	Invalid
empty	Supplier, empty, default	Supplier, empty, hover	Supplier, empty, focus-visible	Supplier, empty, disabled	Supplier, empty, read-only	Supplier, empty, invalid Enter a supplier name.
filled	Supplier, filled, default	Supplier, filled, hover	Supplier, filled, focus-visible	Supplier, filled, disabled	Supplier, filled, read-only	Supplier, filled, invalid Enter a supplier name.

Errors appear when you leave a field or submit the form, never while typing. Once a field shows an error, it re-checks on every change. On submit, focus moves to the first field with an error. The live example on the Code tab shows this.