Class GeneratedVaadinFormItem<R extends GeneratedVaadinFormItem<R>>

All Implemented Interfaces:

AttachNotifier, ClickNotifier<R>, DetachNotifier, HasElement, HasStyle, Serializable

Direct Known Subclasses:

FormLayout.FormItem

@Tag("vaadin-form-item")
@NpmPackage(value="@vaadin/polymer-legacy-adapter",version="23.1.15") @NpmPackage(value="@vaadin/form-layout",version="23.1.15") @NpmPackage(value="@vaadin/vaadin-form-layout",version="23.1.15")
@JsModule("@vaadin/polymer-legacy-adapter/style-modules.js") @JsModule("@vaadin/form-layout/src/vaadin-form-item.js")
public abstract class GeneratedVaadinFormItem<R extends GeneratedVaadinFormItem<R>>
extends Component
implements HasStyle, ClickNotifier<R>

Description copied from corresponding location in WebComponent:

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

<vaadin-form-item> accepts any number of children 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>

Any content can be used. For instance, you can have multiple input elements with surrounding text. The label can be an element of any type:

<vaadin-form-item> <span slot="label">Date of Birth</span> <input placeholder="YYYY" size="4"> - <input placeholder="MM" size="2"> - <input placeholder="DD" size="2"><br> <em>Example: 1900-01-01</em> </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.

Input Width

By default, <vaadin-form-item> does not manipulate the width of the slotted input elements. 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 host attribute can be used to target the label on top state:

 
 <dom-module id="my-form-item-theme" theme-for="vaadin-form-item">
   <template>
     <style>
       :host {
         /* default state styles, label aside */
       }

       :host([label-position="top"]) {
         /* label on top state styles */
       }
     </style>
   </template>
 </dom-module>
 
 

The following shadow DOM parts are available for styling:

Custom CSS Properties Reference

The following custom CSS properties are available on the <vaadin-form-item> element:

See ThemableMixin ? how to apply styles for shadow parts

See Also:

Serialized Form