Form layout and columns
By default every field takes a full row of the form. Set columns lets short fields share a row, like a price next to its currency, or a start time next to an end time.
Widths at three sizes
The editor panel can be narrow (the default block editor sidebar) or wide (a full-width editing screen), so a field's width is set at three sizes:
| Form width | Available widths |
|---|---|
| Narrow (under 560 px) | Full or half |
| Medium (560 px and up) | Full, half, third or two-thirds, or the same as narrow |
| Wide (800 px and up) | Those, plus quarter and three-quarters, or the same as medium |
Leave the medium and wide sizes empty to inherit the smaller size. Fields share a row when consecutive fields add up to a full row: half and half, or a third and two-thirds.
Which fields can share a row
Only fields that stay one line tall should share a row, since a row is as tall as its tallest field. These can: Text, Number, Stepper, Email, Password, URL, Phone, Color, Select, Multiselect, Date, Time, Date & Time, Date range, Slider, Range slider, Select Post and Select User.
Phone is the exception at the narrow size: its country picker and number need the full row, so keep it full width there.
Everything else should stay full width: text areas and editors, media, checkbox and radio lists, relations, containers, switchers and button groups. Repeater doesn't offer the setting at all.
A section takes a width like a field, and the fields inside it lay out on its own row: two half-width sections sit side by side, each with its fields across its own width. A section that is a tab always fills the tabs.
When in doubt, leave a field full width. Use half only for pairs that belong together.
Technical details for LLMs
- Keys:
width(narrow:full|half),responsive_widths.medium(full,half,third,two_thirds, or''to inherit),responsive_widths.wide(addsquarter,three_quarters). vx-framework/get-field-typesreportsform_column_layoutper type:compacttypes may use fractions;fulltypes staywidth: full. Compact:text,number,email,password,url,phone,color,select,multiselect,stepper,date,time,datetime,date_range,slider,range_slider,select_post,select_user.phonestaysfullon narrow. No column setting:repeater.- Also without a column setting:
content_sections,recurring_date. - Default to
width: full. Usehalfonly for a related pair; thirds on medium, quarters on wide. Never place a compact field beside a full-layout one.