Form Layout

Form layout is controlled by form.mode, form.grid, form.groups, form.sections, and root layout.tabs or layout.steps.

Basic form layout

export const usersSchema = {
  resource: "users",
  form: {
    mode: "modal",
    width: "3xl",
    grid: {
      columns: {
        base: 1,
        md: 2
      },
      gap: "gap-4"
    },
    fields: ["name", "email", "roleId", "status"]
  }
} as const;

Rendering priority

FluiKitForm chooses the first matching layout pattern:

1. layout.type: "tabs" with layout.tabs.
2. layout.type: "wizard" with layout.steps.
3. form.groups.
4. form.sections.
5. Plain form.grid.

Form field grid

All plain, grouped, and sectioned fields use gridClassName(form.grid, 1).

form: {
  grid: {
    columns: {
      base: 1,
      md: 2,
      xl: 3
    },
    gap: "gap-4"
  }
}

Form class hook

form: {
  className: "space-y-6"
}

form.className is merged into the form element.