Skip to content

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 widthAvailable 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 (adds quarter, three_quarters).
  • vx-framework/get-field-types reports form_column_layout per type: compact types may use fractions; full types stay width: full. Compact: text, number, email, password, url, phone, color, select, multiselect, stepper, date, time, datetime, date_range, slider, range_slider, select_post, select_user. phone stays full on narrow. No column setting: repeater.
  • Also without a column setting: content_sections, recurring_date.
  • Default to width: full. Use half only for a related pair; thirds on medium, quarters on wide. Never place a compact field beside a full-layout one.

Documentation for the VX Framework.