> Markdown version of [Input Fields](https://vaadin.com/docs/v23/components/input-fields). Section index: [llms.txt](https://vaadin.com/docs/v23/components/llms.txt)

# Input Fields

The following features are available in all [input field components](#input-field-components).

## <a id="label"></a>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](#helper) to provide more guidance, or [tooltips](https://vaadin.com/docs/v23/components/tooltip.md) (since V23.3) in case a helper text can’t be accommodated.

**TypeScript** — `input-field-label.ts`

```html
<vaadin-email-field label="Email address"></vaadin-email-field>
```

**Java** — `InputFieldLabel.java`

```java
EmailField emailField = new EmailField();
emailField.setLabel("Email address");
add(emailField);
```

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.

[Tooltips](https://vaadin.com/docs/v23/components/tooltip.md) (since V23.3), or, for certain input components, icons and [placeholder text](https://vaadin.com/docs/v23/components/text-field.md#placeholder) can be used in addition to a label or `aria-label` to help convey a field’s purpose and usage:

**TypeScript** — `input-field-aria-label.ts`

```html
<vaadin-text-field aria-label="search" placeholder="Search" clear-button-visible>
  <vaadin-icon icon="vaadin:search" slot="prefix"></vaadin-icon>
</vaadin-text-field>
```

**Java** — `InputFieldAriaLabel.java`

```java
TextField textField = new TextField();
textField.getElement().setAttribute("aria-label", "search");
textField.setPlaceholder("Search");
textField.setClearButtonVisible(true);
textField.setPrefixComponent(VaadinIcon.SEARCH.create());
add(textField);
```

## <a id="helper"></a>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 also supported.

**TypeScript** — `input-field-helper.ts`

```html
<vaadin-text-field
  label="Phone number"
  helper-text="Include country and area prefixes"
></vaadin-text-field>

<vaadin-password-field
  label="Password"
  @value-changed="${this.onPasswordChanged}"
  reveal-button-hidden
>
  <vaadin-icon
    icon="vaadin:check"
    slot="suffix"
    style="color:${StrengthColor.strong}"
    ?hidden="${this.strengthText !== 'strong'}"
  ></vaadin-icon>

  <div slot="helper">
    Password strength:
    <span style="color:${this.strengthColor}">${this.strengthText}</span>
  </div>
</vaadin-password-field>
```

**Java** — `InputFieldHelper.java`

```java
TextField textField = new TextField();
textField.setLabel("Phone number");
textField.setHelperText("Include country and area prefixes");

PasswordField passwordField = new PasswordField();
passwordField.setLabel("Password");
passwordField.setRevealButtonVisible(false);

checkIcon = VaadinIcon.CHECK.create();
checkIcon.setVisible(false);
passwordField.setSuffixComponent(checkIcon);

Div passwordStrength = new Div();
passwordStrengthText = new Span();
passwordStrength.add(new Text("Password strength: "),
        passwordStrengthText);
passwordField.setHelperComponent(passwordStrength);

add(textField);
add(passwordField);
```

[Tooltips](https://vaadin.com/docs/v23/components/tooltip.md) (since V23.3) can be used as an alternative to helpers. For example, you might use it in situations where there is insufficient space. Helpers are more accessible by being always visible.

### <a id="helper-position"></a>Helper Position

The helper can be displayed above the field.

**TypeScript** — `input-field-helper-position.ts`

```html
<vaadin-text-field
  label="Phone number"
  helper-text="Include country and area prefixes"
  theme="helper-above-field"
  style="width: 15em;"
></vaadin-text-field>
```

**Java** — `InputFieldHelperPosition.java`

```java
TextField textField = new TextField();
textField.setLabel("Phone number");
textField.setHelperText("Include country and area prefixes");
textField.addThemeVariants(TextFieldVariant.LUMO_HELPER_ABOVE_FIELD);
textField.setWidth("15em");
add(textField);
```

Showing the helper before the field can sometimes be a better choice. It’s more likely to be visible at small viewport sizes when the field is focused. Also, screen reader users can read the instructions before entering the field.

Use the same helper position across the entire application for consistency.

## <a id="required"></a>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:

**TypeScript** — `input-field-required.ts`

```html
<vaadin-text-field
  label="Name"
  required
  error-message="This field is required"
></vaadin-text-field>
<vaadin-date-picker label="Date of birth"></vaadin-date-picker>
```

**Java** — `InputFieldRequired.java`

```java
TextField textField = new TextField();
textField.setLabel("Name");
textField.setRequiredIndicatorVisible(true);
textField.setErrorMessage("This field is required");

DatePicker datePicker = new DatePicker();
datePicker.setLabel("Date of birth");

add(textField, datePicker);
```

### <a id="marking-required-and-optional-fields"></a>Marking Required and Optional Fields

If most of the fields in a form are optional, mark the required ones. When a form has more required than optional fields, mark instead the optional ones by adding a “(optional)” suffix to their labels.

Consistency is key to providing a good user experience, so be careful not to mix. Try to match, whether marking is applied to optional or to required fields in different forms.

## <a id="non-editable-fields"></a>Non-Editable Fields

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

### <a id="read-only"></a>Read-Only

**TypeScript** — `input-field-read-only.ts`

```html
<vaadin-text-field label="Read-only" value="Value" readonly></vaadin-text-field>
```

**Java** — `InputFieldReadonly.java`

```java
TextField textField = new TextField();
textField.setReadOnly(true);
textField.setLabel("Read-only");
textField.setValue("Value");
add(textField);
```

Set a field as read-only when the content needs to be accessible but not editable. Although read-only elements can’t be edited, they will be in the tabbing order and can thus receive focus. The contents of a read-only input can be selected and copied.

### <a id="disabled"></a>Disabled

**TypeScript** — `input-field-disabled.ts`

```html
<vaadin-text-field label="Disabled" value="Value" disabled></vaadin-text-field>
```

**Java** — `InputFieldDisabled.java`

```java
TextField textField = new TextField();
textField.setEnabled(false);
textField.setLabel("Disabled");
textField.setValue("Value");
add(textField);
```

Disable a field to mark it as unavailable. The disabled state is used for fields that aren’t editable and don’t need to be readable. Disabled elements can’t be focused and may be inaccessible to assistive technologies, such as screen readers.

Disabling can be preferable to hiding an element to prevent changes in layout when the element’s visibility changes. It also serves to make users aware of its existence even when it’s currently unavailable.

If the user needs to be able to read or copy the value, use read-only instead.

## <a id="focus"></a>Focus

Focus styles are used to highlight the active element, which is useful for keyboard navigation.

`input-field-focus.ts`

```html
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm password"></vaadin-password-field>
```

The focus style is different for keyboards and pointing devices:

`input-field-focus-styles.ts`

```html
<vaadin-text-field label="Pointer focus" focused></vaadin-text-field>
<vaadin-text-field label="Keyboard focus" focused focus-ring></vaadin-text-field>
```

## <a id="input-field-components"></a>Input Field Components

A variety of components are available for different types of input:

| Component                                                                      | Usage recommendations                                                                                                              |
| ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
| [Text Field](https://vaadin.com/docs/v23/components/text-field.md)             | Basic single-line text input.                                                                                                      |
| [Text Area](https://vaadin.com/docs/v23/components/text-area.md)               | Multi-line text input, for values that aren’t expected to fit on a single line, or when manual line breaks need to be supported.   |
| [Email Field](https://vaadin.com/docs/v23/components/email-field.md)           | For email addresses.                                                                                                               |
| [Number Field](https://vaadin.com/docs/v23/components/number-field.md)         | Numeric-only input, such as counts, measures, or monetary values.                                                                  |
| [Password Field](https://vaadin.com/docs/v23/components/password-field.md)     | Optionally masked password entry.                                                                                                  |
| [Date Picker](https://vaadin.com/docs/v23/components/date-picker.md)           | Date entry with keyboard or a calendar picker.                                                                                     |
| [Time Picker](https://vaadin.com/docs/v23/components/time-picker.md)           | Selecting a time of day; resolution range from hours to milliseconds.                                                              |
| [Date Time Picker](https://vaadin.com/docs/v23/components/date-time-picker.md) | Combined date and time entry.                                                                                                      |
| [Radio Button](https://vaadin.com/docs/v23/components/radio-button.md)         | Select a single option from a list. Optimal accessibility, as all options are visible without any user action.                     |
| [Select](https://vaadin.com/docs/v23/components/select.md)                     | Select a value from an overlay. More compact than Radio Buttons.                                                                   |
| [Combo Box](https://vaadin.com/docs/v23/components/combo-box.md)               | Select a value from a filterable overlay. Appropriate for large sets of options. Supports lazy loading and entry of custom values. |
| [Checkbox](https://vaadin.com/docs/v23/components/checkbox.md)                 | For selecting multiple options from a list, or a single binary toggle.                                                             |

`2F7869A9-3001-43B7-9E7F-7C14F7124205`