Guide

Layout

Two helpers cover most form layout: row for side-by-side fields, group for fieldset sections.

Rows#

row wraps its fields in a responsive grid — stacked on mobile, columns: across from the sm breakpoint (2, 3, or 4):

row do
  field :first_name
  field :last_name
end

row(columns: 3, class: "mt-2") do
  field :city
  field :zip
  field :country
end

The grid classes are literal strings, so a host app's Tailwind scanner picks them up from the gem source. A caller class: merges on top.

Groups#

group renders a daisyUI fieldset with an optional legend — semantic sectioning for related fields:

group(legend: "Address") do
  field :street
  row { field :city; field :zip }
end

It's named group (not section or fieldset) because those are Phlex::HTML element methods — defining them would shadow the elements inside every form.

Both helpers work on the inline builder (f.row { … }), as bare calls inside a Forms::Base class, and inside fields_for builders. Under the Plain theme they degrade to an unstyled div (with a data-form-row hook) and a bare fieldset/legend.

Rows#

Groups#

Available everywhere#