Tabs
Tabs are configured with layout.type: "tabs" and layout.tabs.
Form tabs use layout.tabs. Multi-resource tabs are generated from resources[].
Form tabs
TS
export const usersSchema = {
resource: "users",
layout: {
type: "tabs",
tabs: [
{ key: "profile", title: "Profile", fields: ["name", "email"] },
{ key: "access", title: "Access", fields: ["roleId", "status"] }
]
},
form: {
fields: [
{ name: "name", type: "text" },
{ name: "email", type: "email" },
{ name: "roleId", label: "Role", type: "select" },
{ name: "status", type: "select" }
]
}
} as const;Tab properties
layout.tabs entries use FluiKitFormSection.
| Property | Purpose |
|---|---|
key | Stable tab id. |
label | Tab label fallback. |
title | Tab label, preferred by form tab runtime. |
fields | Field names rendered in the tab. |
className | Metadata class hook. |
Active tab
VibeFlui tracks the active tab for the form. The active tab renders only fields listed in that tab's fields.