Text Field

The Text Field component is used to allow users to provide text input when the expected input is short. As well as plain text, Text Field supports various types of text, including passwords, email addresses and telephone numbers.

Validation

In a Form

When a Text Field is placed inside a form element and validation logic is set on the Text Field, the Text Field is validated when the form is submitted (as per a native input element).

Below, all the Text Fields are marked as required and are validated when the form is submitted.

Single Field

The Text Field can be validated like the native input element.

Below, the Text Field is required but it has no value. The checkedValidity() method is called on the Text Field to validate it.

Numeric input

When collecting input which is made up of digits, but not a number in the mathematical sense, use the Text Field with inputmode="numeric" and pattern="[0-9]*".

For mathematical numbers, refer to the number-field component instead.