Form Config

Type: FluiKitFormConfig.

Properties

Property	Type	Required	Default	Description
`enabled`	`boolean`	No	`true`	Enables form rendering.
`mode`	`"inline" \| "modal" \| "drawer" \| "page"`	No	`"modal"`	Form surface/chrome. Distinct from the `FluiKitForm` component's own `mode` prop (`"create" \| "edit" \| "view"`, CRUD intent) shown under "Direct component usage" below.
`fields`	`FluiKitFieldInput[]`	No	normalized	Form fields.
`grid`	`FluiKitGridConfig`	No	-	Grid columns/gap config.
`groups`	`FluiKitFormGroup[]`	No	-	Field groups.
`sections`	`FluiKitFormSection[]`	No	-	Field sections.
`width`	`string`	No	-	Surface width token or class-like value.
`className`	`string`	No	-	Form class name.
`validation`	`string`	No	-	Registry validation key metadata only — not executed by the runtime as a whole-form validator. Use `field.validator` for active per-field validation.
`submitLabel`	`string`	No	Create/Update	Submit button label.
`cancelLabel`	`string`	No	Cancel	Cancel button label.

Example

form: {
  mode: "modal",
  grid: {
    columns: { base: 1, md: 2 }
  },
  fields: [
    { name: "name", label: "Name", required: true },
    { name: "email", label: "Email", type: "email", required: true }
  ]
}

Use root layout.tabs, layout.steps, or layout.sections for tab, wizard, and section layout orchestration.

Direct component usage

FluiKitForm expects a normalized schema.

TSX

import { FluiKitForm, normalizeSchema } from "@vibeflui/core";

const normalized = normalizeSchema(usersSchema);

<FluiKitForm schema={normalized} mode="create" />;