K

Schema

Schema

A schema is an ordered array of components passed to ->schema([...]). It is the shared vocabulary for arranging content, and the same components render across surfaces — forms, infolists, and action modals all consume a schema.

On this page

A schema is an ordered array of components passed to ->schema([...]). It is the shared vocabulary for arranging content, and the same components render across surfaces — forms, infolists, and action modals all consume a schema.

use NyonCode\WireCore\Foundation\Schema\Grid;
use NyonCode\WireCore\Foundation\Schema\Section;
 
Section::make('profile')
->label('Profile')
->schema([
Grid::make()->columns(2)->schema([
TextInput::make('first_name'),
TextInput::make('last_name'),
]),
])

How it works

A schema is a tree of components. Two kinds make up that tree:

  • Fields carry a value and a state path — TextInput, Select, Toggle, … They bind to your model/state and participate in validation. See the Forms → Fields reference.
  • Layout & schema components carry no state of their own; they arrange their children. Grid, Section, Tabs, Wizard, and friends each take their own ->schema([...]), so layouts nest arbitrarily deep.

At render time the host walks the tree depth-first: every component resolves its own configuration (labels, visibility, columns) and renders its Blade view, recursing into child schemas. Because layout components hold no value, they can be added, removed, or reordered freely without touching your data — only fields map to state.

All schema components live under NyonCode\WireCore\Foundation\Schema and extend the shared LayoutComponent base, which is why the identical Grid or Section works in a form, an infolist, or a modal.

Column spanning

Any child of a column-based layout (Grid, Section, Fieldset, Tab, Step) controls its own width:

TextInput::make('bio')->columnSpan(2); // span two columns
TextInput::make('notes')->columnSpanFull(); // span the full row

Layout components

Component Purpose
Grid Responsive multi-column layout
Flex Arrange children on a single horizontal (flexbox) axis
Section Group components under a heading, optionally collapsible
Fieldset Group related components with a bordered legend
Tabs Client-side tabbed panels (all panels validate together)
Wizard Client-side multi-step layout with a step indicator

Prime components

Static, non-input components that display content:

Component Purpose
Callout Soft, colored notice box with heading and icon
Empty State Centered placeholder shown when there is nothing to display

Where schemas are used

Because these components live in core Foundation\Schema, they are consumed by more than forms:

  • Forms build their body from a schema. Grid, Section, and Fieldset also have thin NyonCode\WireForms\Components\Layout\* aliases (deprecated in v2.0) that only swap in form-specific markup; every other schema component is used directly.
  • Infolists reuse the same layout vocabulary for read-only detail views.
  • Action modals use Wizard for multi-step flows — see Modals → Multi-Step Wizard.