VVibeFlui

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.

PropertyPurpose
keyStable tab id.
labelTab label fallback.
titleTab label, preferred by form tab runtime.
fieldsField names rendered in the tab.
classNameMetadata class hook.

Active tab

VibeFlui tracks the active tab for the form. The active tab renders only fields listed in that tab's fields.