Input Fields

All input field components share a common set of features.

These features are described here, along with recommendations on how to best use them.

Label

An input field should have a label to identify it. Labels should be clear, concise, and written in sentence case. Avoid unclear and verbose language. Use helper texts to give more guidance, or tooltips in case helper text can’t be accommodated.

<EmailField label="Email address" />

In situations where enough context is provided, such as grid filters and search fields, visible labels can be omitted. In such cases, an aria-label attribute should be provided instead to identify the field, so that users of assistive technologies can interpret the input correctly.

Helper

Helpers provide information when needed so that end users can fill in a form or field without errors. For example, they’re helpful when the field requires a specific format. Helpers typically consist of plain text, but HTML and other components are supported.

<TextField label="Phone number" helperText="Include country prefix" />

Required

Input fields can be either optional or required. Optional fields are typically left unmarked. In the default theme, required fields are marked with a bullet character. It’s recommended to provide hint text to let users know how required fields are marked:

<HorizontalLayout theme="spacing">
  <TextField label="Name" required errorMessage="Name is required" />
  <DatePicker label="Date of birth" />
</HorizontalLayout>

Non-Editable Fields

Sometimes, the user isn’t allowed to edit the value of certain fields. Those fields can be made read-only or disabled, depending on the situation. Consider which is the appropriate choice when choosing.

<HorizontalLayout theme="spacing">
  <TextField label="Read-only" readonly value="Value" />
  <TextField label="Disabled" disabled value="Value" />
</HorizontalLayout>

Focus

Focus styles are used to highlight the active element, which is useful for keyboard navigation. The focus style is different for keyboards and pointing devices.

Important

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

Docs