Text Field

Text Field allows the user to input and edit text. Prefix and suffix components, such as icons, are also supported.

<TextField label="Street Address" value="Ruukinkatu 2" />

Common Input Field Features

Text Field includes all shared input field features.

See shared input field features

Placeholder

A placeholder is a short description of the expected input value. It’s only shown when the text field is empty.

<TextField placeholder="Search" />

Placeholders aren’t universal substitutes for labels, as they are only visible while the field is empty. Helpers are a better way to provide information that the user may need when filling in the field. Unless marked as required, fields with placeholders also risk being inadvertently skipped when filling in a form.

Search fields are a good example of where placeholders can be used without a label, if they are prefixed or suffixed with a search icon or next to a search button.

Fields with placeholders, but without labels, should also provide an invisible label using the aria-label attribute to ensure that screen readers can access it.

Clear Button

The optional clear button clears the field’s current value. It’s hidden while the field is empty. Clear buttons are useful for search and filter fields, where it’s common for the user to want to clear the field value. However, in data entry forms, they are typically unnecessary.

<TextField value="Value" clearButtonVisible />

Text Alignment

Three different text alignments are supported: left (default), center, and right.

Right-aligned values are recommended for numerical values when presented in vertical groups, as this makes it easier to interpret and compare values.

<VerticalLayout theme="spacing">
  <TextField value="Left" />
  <TextField value="Center" theme="align-center" />
  <TextField value="Right" theme="align-right" />
</VerticalLayout>

Important

You can find more information in the corresponding article on vaadin.com.

Docs