Layout Config
Type: FluiKitLayoutConfig.
Layout config controls root and form presentation. For field grouping, also see Form Config.
Properties
| Property | Type | Required | Description |
|---|---|---|---|
type | "page" | "tabs" | "wizard" | "sections" | No | Layout mode. |
tabs | FluiKitFormSection[] | No | Form tab definitions or single-resource root tab slots used when type is "tabs". |
steps | FluiKitFormSection[] | No | Wizard step definitions used when type is "wizard". |
sections | FluiKitFormSection[] | No | Section definitions used when type is "sections". |
className | string | No | Additional class name merged onto the header/toolbar row container, applied regardless of layout.type. |
Section shape
Layout entries reuse FluiKitFormSection.
| Property | Type | Required | Description |
|---|---|---|---|
key | string | Yes | Section, tab, or step key. |
label | string | No | Short display label. |
title | string | No | Section, tab, or step title. |
fields | string[] | No | Form field names included in this entry. |
table | boolean | No | Includes the table surface when supported by the layout. |
form | boolean | No | Includes the form surface when supported by the layout. |
className | string | No | Entry class name. |
table and form place the root table or an always-visible create form into a root layout slot, but only when layout.type is "tabs" or "sections" — the root renderer reads layout.tabs/layout.sections for this, never layout.steps. Setting table/form on entries inside layout.steps (type: "wizard") has no effect at the root; layout.steps is for grouping form fields into wizard steps only (see Form Config), not for placing the table or a standalone form.
When resources[] is present (multi-resource schemas), child resource tabs/sections are generated from resources[] instead, and the root-level layout behaves differently by type:
layout.type | Multi-resource root behavior |
|---|---|
(unset) / "tabs" / "wizard" | Child resources render as tabs. |
"sections" / "page" | Child resources render stacked, one after another. |
Note that "wizard" still renders child-resource tabs at the multi-resource root — the wizard stepper only applies inside a single form surface, driven by layout.steps.
Common root usage
layout: {
type: "tabs",
tabs: [
{ key: "table", title: "Table", table: true },
{ key: "form", title: "Form", form: true }
]
}Form layout usage
layout: {
type: "wizard",
steps: [
{ key: "profile", title: "Profile", fields: ["name", "email"] },
{ key: "access", title: "Access", fields: ["role", "status"] }
]
}