FormItem

Description #

<vaadin-form-item> is a Web Component providing labelled form item wrapper for using inside <vaadin-form-layout>.

<vaadin-form-item> accepts a single child as the input content, and also has a separate named label slot:

<vaadin-form-item>
  <label slot="label">Label aside</label>
  <input>
</vaadin-form-item>

The label is optional and can be omitted:

<vaadin-form-item>
  <input type="checkbox"> Subscribe to our Newsletter
</vaadin-form-item>

By default, the label slot content is displayed aside of the input content. When label-position="top" is set, the label slot content is displayed on top:

<vaadin-form-item label-position="top">
  <label slot="label">Label on top</label>
  <input>
</vaadin-form-item>

Note: Normally, <vaadin-form-item> is used as a child of a <vaadin-form-layout> element. Setting label-position is unnecessary, because the label-position attribute is triggered automatically by the parent <vaadin-form-layout>, depending on its width and responsive behavior.

Deprecation note: The label-position attribute is deprecated and will be removed in Vaadin 26. Use labelsAside property on the form-layout instead.

Input Width #

By default, <vaadin-form-item> does not manipulate the width of the slotted input element. Optionally you can stretch the child input element to fill the available width for the input content by adding the full-width class:

<vaadin-form-item>
  <label slot="label">Label</label>
  <input class="full-width">
</vaadin-form-item>

Styling #

The label-position attribute can be used to target the label on top state:

vaadin-form-item[label-position="top"] {
  padding-top: 0.5rem;
}

Deprecation note: The label-position attribute is deprecated and will be removed in Vaadin 26. Use labelsAside property on the form-layout instead.

The following shadow DOM parts are available for styling:

See Styling Components documentation.