com.vaadin.flow.component.formlayout

Class GeneratedVaadinFormItem<R extends GeneratedVaadinFormItem<R>>

java.lang.Object

com.vaadin.flow.component.Component

com.vaadin.flow.component.formlayout.GeneratedVaadinFormItem<R>

All Implemented Interfaces:

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

Direct Known Subclasses:

FormLayout.FormItem

@Generated(value={"Generator: com.vaadin.generator.ComponentGenerator#1.1-SNAPSHOT","WebComponent: Vaadin.FormItemElement#2.1.0","Flow#1.1-SNAPSHOT"})
 @Tag(value="vaadin-form-item")
 @NpmPackage(value="@vaadin/vaadin-form-layout",
            version="2.1.6")
 @JsModule(value="@vaadin/vaadin-form-layout/src/vaadin-form-item.js")
 @HtmlImport(value="frontend://bower_components/vaadin-form-layout/src/vaadin-form-item.html")
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:

Part name	Description
label	The label slot container

Custom CSS Properties Reference

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

Custom CSS property	Description	Default
--vaadin-form-item-label-width	Width of the label column when the labels are aside	8em
--vaadin-form-item-label-spacing	Spacing between the label column and the input column when the labels are aside	1em
--vaadin-form-item-row-spacing	Height of the spacing between the form item elements	1em

See ThemableMixin – how to apply styles for shadow parts

See Also:

Serialized Form

Constructor Summary

Constructors

Constructor and Description
GeneratedVaadinFormItem()

Method Summary

Modifier and Type	Method and Description
protected void	addToLabel(Component... components) Adds the given components as children of this component at the slot 'label'.
protected void	remove(Component... components) Removes the given child components from this component.
protected void	removeAll() Removes all contents from this component, this includes child components, text content as well as child elements that have been added directly to this component using the Element API.

Methods inherited from class com.vaadin.flow.component.Component

addListener, fireEvent, from, get, getChildren, getElement, getEventBus, getId, getLocale, getParent, getTranslation, getTranslation, getUI, hasListener, isTemplateMapped, isVisible, onAttach, onDetach, onEnabledStateChanged, set, setElement, setId, setVisible

Methods inherited from class java.lang.Object

clone, equals, finalize, getClass, hashCode, notify, notifyAll, toString, wait, wait, wait

Methods inherited from interface com.vaadin.flow.component.HasStyle

addClassName, addClassNames, getClassName, getClassNames, getStyle, hasClassName, removeClassName, removeClassNames, setClassName, setClassName

Methods inherited from interface com.vaadin.flow.component.HasElement

getElement

Methods inherited from interface com.vaadin.flow.component.ClickNotifier

addClickListener, addClickShortcut

Methods inherited from interface com.vaadin.flow.component.AttachNotifier

addAttachListener

Methods inherited from interface com.vaadin.flow.component.DetachNotifier

addDetachListener

Constructor Detail

GeneratedVaadinFormItem

public GeneratedVaadinFormItem()

Method Detail

addToLabel

protected void addToLabel(Component... components)

Adds the given components as children of this component at the slot 'label'.

Parameters:

components - The components to add.

See Also:

MDN page about slots, Spec website about slots

remove

protected void remove(Component... components)

Removes the given child components from this component.

Parameters:

components - The components to remove.

Throws:

IllegalArgumentException - if any of the components is not a child of this component.

removeAll

protected void removeAll()

Removes all contents from this component, this includes child components, text content as well as child elements that have been added directly to this component using the Element API.