Layout

Fields are arranged by layouts and columns. Layouts only arrange; they never change what is validated or saved (except that a hidden layout hides its fields). This page is a summary; all details are in Schemas.

use Anvil\Schema\Layout\Section;
use Anvil\Schema\Layout\Tab;
use Anvil\Schema\Layout\Tabs;

$form->schema([
    Tabs::make()->tabs([
        Tab::make('Contact')->icon('person')->columns(2)->schema([
            TextInput::make('name')->required(),
            TextInput::make('email')->email(),
            Textarea::make('address')->columnSpanFull(),
        ]),
        Tab::make('Notes')->schema([MarkdownEditor::make('notes')]),
    ]),
]);

Columns

Every level of a schema is a grid of 1 to 4 columns (12 column Bootstrap grid, one column on phones):

Container	Columns
$form->columns(2)	top level of the form, default 1
Grid::make(3, [...]), Section::make()->columns(2), Tab::make()->columns(2), Step::make()->columns(2)	the fields inside, default 1 (Grid: 2)

A field takes one column. Make it wider with:

Option	Effect
columnSpan(2)	spans 2 columns (1 to 4; at most the columns of its container)
columnSpanFull()	the full width of its container

Layouts always take the full width. Some fields usually get the full width: Textarea, MarkdownEditor, Repeater, CheckboxList with several columns.

Layouts

Layout	Use it for	Options
Grid::make(2, [...])	columns without a frame	schema([…])
Section::make('Heading')	a titled group	description('…'), columns(), schema([…]), collapsible(), collapsed()
Tabs::make()->tabs([Tab::make('…')])	long forms in parts	Tab: icon('…'), columns(), schema([…])
Wizard::make()->steps([Step::make('…')])	step by step creation	Step: like Tab; steps when creating, sections when editing and on the detail page

All layouts are in Anvil\Schema\Layout, can be nested and have hiddenOn(). See Grid, Section, Tabs, Wizard and Nesting.

Visibility

hiddenOn('create', 'edit', 'view') works on fields and layouts: a hidden component is not rendered, not validated and not written in that operation. Errors of fields in closed sections, other tabs or wizard steps open them, see Errors in hidden parts.

Detail page

The detail page renders the same schema read-only: same layouts, same columns, each field with its read-only display (labels of options, formatted numbers and dates, rendered Markdown, download links).

Own layouts

php spark make:anvil-layout generates a layout class and its view, see Own layouts.