Columns

Fields stack below each other by default. Two places lay them out in columns instead, and both collapse to a single column below the md breakpoint.

On the whole form

Set the columns of the whole form in PHP with FormConfig::columns(n), 1 to 4; the schema carries them as columns:

public function configure(FormConfig $form): void
{
    $form->columns(2);
}

Or use the columns prop of <Form> (and FormRenderer), which wins over the schema:

<template>
    <Form :schema="form" :columns="3" />
</template>

A schema without columns (the default) leaves the form at one column, as before. FormConfig::columns() requires tranquil-tools/laravel-form-builder 1.6 and laravel-vue-form-builder 1.9; an older renderer ignores it.

On a section

Section::make()->columns(n) lays out the fields of that section only, whatever the form does:

Section::make()
    ->title('Address')
    ->columns(3)
    ->fields([
        Text::make('street')->columnSpan(2),
        Text::make('number'),
        Text::make('postcode'),
        Text::make('city')->columnSpan(2),
    ]),

A nested section without ->columns() uses the columns of the section around it, or those of the form; ->columns(1) stacks its fields again. See Sections.

Spanning columns

Textareas, WYSIWYG editors, repeaters, key-value fields, buttons, hidden fields and sections take the whole row unless they set a ->columnSpan(). From the Vue side, fullWidth and columnSpan in field-overrides do the same:

<Form :schema="form" :columns="2" :field-overrides="{ notes: { fullWidth: true } }" />

The grid uses md:grid-cols-2 to md:grid-cols-4 and md:col-span-2 to md:col-span-4. They live in the package's Vue components, so the @source line from Installation picks them up.

Requires tranquil-tools/laravel-form-builder 1.5 and laravel-vue-form-builder 1.8 or newer for sections and spans; form-level columns 3 and 4 only need the renderer.