Package com.vaadin.flow.component.formlayout

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.9") @NpmPackage(value="@vaadin/form-layout",version="23.1.9") @NpmPackage(value="@vaadin/vaadin-form-layout",version="23.1.9")
@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=&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:

    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 Detail

      • GeneratedVaadinFormItem

        public GeneratedVaadinFormItem()

    • Method Detail

      • 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.