Option Loaders

Option loaders provide dynamic options for fields and filters.

Use optionLoader when options come from runtime data, a static docs mock, a cached source, or an adapter integration.

Field schema usage

schemas/users/user-form.schema.ts

export const userFormSchema = {
  version: "1.0.0",
  resource: "users",
  form: {
    fields: [
      {
        name: "roleId",
        label: "Role",
        type: "select",
        optionLoader: "roles.options"
      }
    ]
  },
  registry: {
    optionLoaders: ["roles.options"]
  }
} as const;

Filter schema usage

schemas/users/user-table.schema.ts

export const userTableSchema = {
  version: "1.0.0",
  resource: "users",
  table: {
    filters: [
      {
        key: "status",
        label: "Status",
        type: "select",
        optionLoader: "users.statusOptions"
      }
    ],
    columns: ["name", "email", "status"]
  },
  registry: {
    optionLoaders: ["users.statusOptions"]
  }
} as const;

Runtime registry

lib/vibeflui/registry.ts

import { createRegistry } from "@vibeflui/core";

export const registry = createRegistry({
  optionLoaders: {
    "roles.options": async () => [
      { label: "Admin", value: "admin" },
      { label: "Editor", value: "editor" },
      { label: "Viewer", value: "viewer", disabled: true }
    ],
    "users.statusOptions": () => [
      { label: "Active", value: "active" },
      { label: "Suspended", value: "suspended" }
    ]
  }
});

Option shape

schemas/shared/options.ts

type Option = {
  label: string;
  value: string | number | boolean;
  disabled?: boolean;
};

Static options

Use static options when the list is small and stable.

schemas/users/user-fields.ts

{
  name: "status",
  label: "Status",
  type: "select",
  options: [
    { label: "Active", value: "active" },
    { label: "Suspended", value: "suspended" }
  ]
}

Endpoint options

Use optionsEndpoint, optionsDataPath, optionLabelKey, and optionValueKey when options come from an endpoint.

schemas/users/user-fields.ts

{
  name: "roleId",
  label: "Role",
  type: "select",
  optionsEndpoint: "/api/roles",
  optionsDataPath: "data",
  optionLabelKey: "name",
  optionValueKey: "id"
}

Official examples note

Official examples should use static mock option loaders, not real backend endpoints.