Field group lays out related editors and joins their borders. It owns only the layout, the seams and the group name: each editor keeps its own value, name, label, state and validation, and the group submits nothing itself. label names the tuple (“Canvas size”); every editor still needs its own complete label, because prefixes like W are visual shorthand.
It is the editor counterpart of Button group and shares its seam treatment.
To stack separate Fields with spacing, use Field’s group slot instead.
Tuples
Editors share the main axis equally. Keep a related value that is not part of the tuple, such as opacity, outside the group so it reads as separate.
An editor that declares its own inline-size or flex keeps it. Inside a container with a definite inline size the editors shrink below their intrinsic width; an ancestor that is sized by its content (a grid auto track, fit-content) keeps each native input’s intrinsic minimum, so give such containers an inline size.
Color channels
Default density
Compact density
Restart from the initial state
Show the copyable source
Buttons and Toggles can join beside the editors, for example a lock between width and height. A Separator divides editors and takes the perpendicular orientation automatically.
Input, Input group, Text area, Select and Native select are editor members. Button and Toggle can join beside them, for example a lock toggle next to a width/height pair, and Menu or Popover participate through their slotted trigger; popup content is never a member.
Hidden members (hidden) do not participate. Reordering, removing or replacing a member updates the seams and part registrations without replacing other controls. Content that is not a member splits the group into independent seam runs.
Toggle and separator
Default density
Compact density
Restart from the initial state
Show the copyable source
Each editor keeps its own state inside the group. A read-only or disabled editor shows its usual treatment while its neighbours stay editable.
Disable or make read-only the editors individually (disabled, readonly), or wrap the group in a disabled fieldset through Field. The group adds no selection state: it never implies that one member is chosen.
Read-only and disabled
Default density
Compact density
Restart from the initial state
Show the copyable source
orientation="vertical" stacks the editors, stretches them to the widest one and joins their block edges. Use it for long tuples that would become unreadable in one row.
Vertical
Default density
Compact density
Restart from the initial state
Show the copyable source
The color picker composes a Field group for its channel editors (R/G/B, H/S/L, …, or the single hex editor) and keeps the alpha editor apart with the row gap, so every format reads as one tuple plus opacity.
API Reference
Every element also accepts motion-policy.
Slots
SlotDescriptiondefaultThe editors, such as Inputs, Input groups and Selects, with Toggles, Buttons or a Separator between them.
Related
Components, widgets and patterns that use this one.