Package com.vaadin.flow.component.formlayout

Class GeneratedVaadinFormItem<R extends GeneratedVaadinFormItem<R>>

  • All Implemented Interfaces:
    com.vaadin.flow.component.AttachNotifier, com.vaadin.flow.component.ClickNotifier<R>, com.vaadin.flow.component.DetachNotifier, com.vaadin.flow.component.HasElement, com.vaadin.flow.component.HasStyle, Serializable
    Direct Known Subclasses:
    FormLayout.FormItem
    @Deprecated
@Tag("vaadin-form-item")
@NpmPackage(value="@vaadin/polymer-legacy-adapter",version="23.6.1") @NpmPackage(value="@vaadin/form-layout",version="23.6.1") @NpmPackage(value="@vaadin/vaadin-form-layout",version="23.6.1")
@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 com.vaadin.flow.component.Component
implements com.vaadin.flow.component.HasStyle, com.vaadin.flow.component.ClickNotifier<R>
    Deprecated.
    since v23.3, generated classes will be removed in v24.

    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=&quot;top&quot; 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:

    Shadow DOM parts 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 properties available for styling
    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

    • Method Summary

      All Methods Instance Methods Concrete Methods Deprecated Methods 
      Modifier and Type Method Description
      protected void addToLabel​(com.vaadin.flow.component.Component... components)
      Deprecated.
      since v23.3, generated classes will be removed in v24.
      protected void remove​(com.vaadin.flow.component.Component... components)
      Deprecated.
      since v23.3, generated classes will be removed in v24.
      protected void removeAll()
      Deprecated.
      since v23.3, generated classes will be removed in v24.

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

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

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

        addAttachListener

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

        addClickListener, addClickShortcut, addDoubleClickListener, addSingleClickListener

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

        addDetachListener

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

        getElement

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

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

    • Constructor Detail

      • GeneratedVaadinFormItem

        public GeneratedVaadinFormItem()
        Deprecated.

    • Method Detail

      • addToLabel

        @Deprecated
protected void addToLabel​(com.vaadin.flow.component.Component... components)
        Deprecated.
        since v23.3, generated classes will be removed in v24.
        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

        @Deprecated
protected void remove​(com.vaadin.flow.component.Component... components)
        Deprecated.
        since v23.3, generated classes will be removed in v24.
        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

        @Deprecated
protected void removeAll()
        Deprecated.
        since v23.3, generated classes will be removed in v24.
        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.