Forms

FieldGroup

The style panel's label-beside-field row, so dense forms line up without bespoke grids.

Importimport { FieldGroup } from "@/components/ui/FieldGroup";
Sourcesrc/components/ui/FieldGroup

The style panel's field grammar: a group label above, and one to four controls in a row beneath it. Use it rather than a bespoke grid, so dense forms line up across panels instead of each inventing its own column widths.

Columns

columns sets how many controls share the row. Field prefixes — the W and H in a size row — belong inside each control, not in the group label.

Dimensions

Full width

Format

Label action

labelAction puts a control on the label row — typically the delete for a removable layer. When a row owns its own delete, the controls inside it take showClear={false} so the row has one delete rather than two.

Fill

Props

FieldGroup

PropTypeDefaultDescription
labelstringGroup label above the row. Omit for an unlabelled row of controls.
columns1 | 2 | 3 | 41How many controls share the row.
labelActionReactNodeA control on the label row, such as a remove button.