feat: apply labels aside to form layout field children by vursen · Pull Request #12601 · vaadin/web-components

vursen · 2026-09-03T09:48:46Z

Description

Depends on #12590

Form layout in auto-responsive mode with labelsAside sets the data-form-layout-labels-aside attribute on each child while labels fit beside the fields, and removes it when they fall back above
- The attribute goes on all children, including form row children, form items and plain elements; the layout no longer touches the theme attribute
Fields that support the label-aside theme variant (text fields, pickers, select, combo boxes, custom field, checkbox and radio groups, sliders) also switch to the label-aside layout when the attribute is set
vaadin-checkbox, vaadin-radio-button and vaadin-switch indent themselves by the label width plus spacing when the attribute is set, so their controls line up with the inputs
- Uses padding-inline-start, since the layout resets child margins in auto-responsive mode
Added a labels-aside-active host attribute, set while labels are displayed aside, and documented it and the child attribute in the JSDoc. It replaces the internal fits-labels-aside attribute on #layout
The layout passes its label width and spacing to the children as --vaadin-field-side-label-width and --vaadin-field-side-label-gap, so every field shares the same label column, also fields without a label
Updated the DOM snapshot
Replaced the vaadin-form-item wrappers in the labels-aside examples of dev/form-layout-auto-responsive.html with fields as direct children

Type of change

Feature

How to test

Open dev/form-layout-auto-responsive.html
Scroll to "autoResponsive inside HorizontalLayout + labels aside"
Make the browser window narrower, then wider again
Labels move beside the fields when there is room and back above them when there isn't; all inputs in a column start at the same x
Optionally add a <vaadin-checkbox label="Newsletter"> to one of those layouts: its box lines up with the inputs

Note

Base theme only. The Lumo styles for the variant live on feat/label-aside-lumo-styles and still need the data-form-layout-labels-aside selectors. Visual tests for this behavior are to be added separately. The slider label sits at the top of its row instead of on the input text line; that comes from the base variant in #12590, where #controls is not baseline-aligned.

🤖 Generated with Claude Code

jouni · 2026-09-04T06:27:40Z

Why labels-aside-active and not simply labels-aside on the form-layout as well?

vursen · 2026-09-04T07:55:42Z

Why labels-aside-active and not simply labels-aside on the form-layout as well?

Labels-aside is already used to mean simply that the mode is enabled. So maybe labels-aside-active would be better off as labels-fit-aside or something along those lines instead.

jouni · 2026-09-04T12:43:37Z

labels-aside-active is fine.

The baseline guide now always uses the bottom-anchored configuration: its area ends at the input's top line and the negative margin pulls it down over the input box, which works no matter what is displayed above the input. This removes the has-label / no-label toggle properties, whose only consumer was the guide, and fixes the baseline of a field with a helper above and no label, which was reported at the helper's text line instead of the input's. The slider controls now get the input border and padding also without a label; this height previously came from the guide's size in the no-label configuration. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Message-input set --vaadin-input-field-border-width to a unitless 0, which made the baseline guide's margin calc invalid. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>