VVibeFlui

Forms

Forms describe input surfaces generated from a VibeFlui schema.

VibeFlui forms can render native inputs, custom components, registry field adapters, async options, validation, computed values, transformed submit payloads, grouped sections, tabs, and wizard steps.

Basic form

TS
export const usersSchema = {
  resource: "users",
  identity: {
    key: "id",
    param: "id"
  },
  form: {
    enabled: true,
    mode: "modal",
    fields: [
      { name: "name", label: "Name", type: "text", required: true },
      { name: "email", label: "Email", type: "email", required: true },
      {
        name: "status",
        type: "select",
        defaultValue: "active",
        options: [
          { label: "Active", value: "active" },
          { label: "Pending", value: "pending" },
          { label: "Suspended", value: "suspended" }
        ]
      }
    ]
  },
  actions: {
    create: {
      enabled: true,
      label: "Create user"
    },
    edit: {
      enabled: true,
      label: "Edit"
    }
  }
} as const;

Defaults

FeatureDefault
form.enabledtrue
form.mode"modal"
string field inputinferred from name
createValueMode"empty"
editValueMode"fromRow"
create submit labelCreate
edit submit labelUpdate
cancel labelCancel
save iconmdi:content-save-outline
cancel iconmdi:close-circle-outline

Form surfaces

form.mode controls how the form is shown after create or edit actions:

ModeSurface
modalCentered modal dialog.
drawerDrawer surface.
pageFull page-like panel inside VibeFlui.
inlineInline form area below the table.

Runtime flow

When the user submits a form:

  1. VibeFlui applies computed field values.
  2. Built-in field validation runs.
  3. Registry validators run.
  4. Field transformers run.
  5. schema.transform.request runs when configured.
  6. VibeFlui executes the create or update action flow.
  7. Feedback and lifecycle events are resolved by the parent FluiKit runtime.

Subpages