Responsive layout

layout is available on input fields and object/array containers. Use integer spans from 1 through 12. Resize the browser to see the two name fields stack on small screens and share a row from 768px.

Usage

Use your form instance from useForm. See the initial setup.

const schema = z.object({ firstName: z.string(), lastName: z.string() });

<ErlForm
  form={form}
  schema={schema}
  fieldConfig={{
    firstName: { section: "name", layout: { colSpan: 12, md: 6 } },
    lastName: { section: "name", layout: { colSpan: 12, md: 6 } },
  }}
  sectionConfig={{ name: { title: "Full name" } }}
/>

Missing breakpoints inherit the previous value. In 1.0.0, each ungrouped root field gets its own grid wrapper. Assign root fields to the same section so they share a row. Object children already share a grid.

Sections group root fields; section on a nested child does not create another group.