Vaadin Flow - Forms

Flow
1

I’m trying to get a form implemented.

What I want to achieve is

  • having the caption of the input elements above the element
  • set the size of a textField
  • have a row with two textfields
  • have a row with one textfield (column span 2)

I couldn’t find an example. Help is appreciated.

2

You can find the information with examples in the components doc section of our web page: https://vaadin.com/components/browse

In your case at https://vaadin.com/components/vaadin-form-layout/html-api and https://vaadin.com/components/vaadin-text-field/html-api/elements/Vaadin.TextFieldElement

For example for a simple form item spanning two cols and having label on top:

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