Skip to content

refactor: add theme switcher to all FormLayout examples #5229

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
vursen wants to merge 2 commits into
base: main
Choose a base branch
from
Open

refactor: add theme switcher to all FormLayout examples #5229

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
702c9f3
refactor: add theme switcher to all FormLayout examples
vursen Feb 25, 2026
234de6f
Merge branch 'main' into docs/form-layout-theme-switcher
vursen Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions articles/components/form-layout/index.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ The sections below describe features available in auto-responsive mode.

In auto-responsive mode, all fields are laid out in a single column by default. To render multiple fields side-by-side, i.e. in multiple columns, they can be grouped into Form Rows.

[.example]
[.example,themes="lumo,aura"]
--
[source,java]
----
Expand Down Expand Up @@ -105,7 +105,7 @@ Forms are easier to understand if fields are grouped into rows based on how clos

By default, labels are rendered above the field. Labels can be rendered next to the field by wrapping fields into Form Items and switching to labels-aside mode.

[.example]
[.example,themes="lumo,aura"]
--
[source,java]
----
Expand Down Expand Up @@ -160,7 +160,7 @@ formLayout.setColumnWidth("8em");

Additionally, columns can be set to expand to fill any remaining available space in the layout:

[.example]
[.example,themes="lumo,aura"]
--
[source,java]
----
Expand All @@ -184,7 +184,7 @@ This is typically combined with expanding fields to fill the full width of their

In auto-responsive mode, fields do not fill the columns they're in by default (although they are prevented from overflowing them). This can be changed by enabling field expansion:

[.example]
[.example,themes="lumo,aura"]
--
[source,java]
----
Expand Down Expand Up @@ -212,7 +212,7 @@ Although a uniform field size may look nice, matching field widths to the typica

The number of columns can be limited by setting the maximum column count.

[.example]
[.example,themes="lumo,aura"]
--
[source,java]
----
Expand Down Expand Up @@ -253,7 +253,7 @@ The following example sets
- Two columns when the layout is at least 320 pixels wide
- Three columns when the layout is at least 500 pixels wide

[.example]
[.example,themes="lumo,aura"]
--
[source,java]
----
Expand Down Expand Up @@ -282,7 +282,7 @@ By default, labels are rendered above the field. Labels can be rendered next to

In responsive steps mode, fields wrapped in Form Items render their fields on the side by default, unless the breakpoint configuration defines the label position to be above the fields.

[.example]
[.example,themes="lumo,aura"]
--
[source,java]
----
Expand Down Expand Up @@ -359,7 +359,7 @@ To prevent a field from stretching to fill the full width of the column, wrap it

Fields can span multiple columns. Note that fields wrapped into Form Items must have their columns span set on the Form Item instead of the field itself.

[.example]
[.example,themes="lumo,aura"]
--
[source,java]
----
Expand Down