vaadin-form-layout

Vaadin Form Creation

Workflow

Track these three steps as TODOs so progress stays visible and the work can be resumed if it's interrupted partway through. Work through them in order.

Step 1 – Understand the input and plan

Process the spec source first: fetch and inspect a Figma URL, read a screenshot, or parse a text prompt.

• Well-defined spec (explicit field list, or a design with clear fields and labels): implement exactly what's specified. Do not invent extra fields, rename labels, or add controls the spec doesn't call for. The output should be predictable and faithful to the input.
• Vague request (e.g. "make a customer form" with no field list): ask a few targeted clarifying questions before planning — which fields and their data types, how they group, and whether it should be a single section or several. Don't silently guess the contents. Once the contents are settled, plan the structure and record it in your TODOs:
• the field list and the data type of each field,
• the section layout — single section, stacked vertical sections, or side-by-side horizontal sections,
• which reference example (see table below) most closely matches the planned structure. Sectioning guidance: when a form covers multiple logical groups of fields (e.g. basic details and address), split it into separate FormLayout instances — one per section, each with its own heading added into the FormLayout spanning the full column width. Use a heading element whose level fits the surrounding view hierarchy (e.g. a section heading nested under a page title). If the right level isn't clear from the surrounding code, default to H4 as the reference examples do — don't go out of your way to discover the exact level. Arrange sections side-by-side with a wrapping HorizontalLayout (growing and shrinking equally, wrapping to one column on narrow viewports) or stacked in a VerticalLayout.

Step 2 – Gather references

With the component set now known from the plan:

• Resolve the theme. Check Application.java for the @StyleSheet import: Aura.STYLESHEET → Aura, Lumo.STYLESHEET → Lumo (also the default if no theme is found). Theme affects component variants, e.g. RadioGroupVariant.AURA_HORIZONTAL vs RadioGroupVariant.LUMO_VERTICAL for horizontal radio groups.
• Read the matching reference example end-to-end (table below).
• Fetch component API docs with mcp_vaadin_get_component_java_api for every component you'll use, including FormLayout — method signatures differ between Vaadin versions.