Options

Options power select, multiselect, radio, radio-group, checkbox-group, combobox, and autocomplete fields.

Static options

{
  name: "status",
  type: "select",
  options: [
    { label: "Active", value: "active" },
    { label: "Pending", value: "pending" },
    { label: "Suspended", value: "suspended", disabled: true }
  ]
}

Static options are used directly and do not reload on every keystroke.

Option loader

Use optionLoader for registry-driven options.

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

export const registry = createRegistry({
  optionLoaders: {
    "users.roles": async () => [
      { label: "Admin", value: "admin" },
      { label: "Editor", value: "editor" },
      { label: "Viewer", value: "viewer" }
    ]
  }
});

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

The loader receives field context: schema, field, value, values, and mode.

Options endpoint

Use optionsEndpoint for simple GET-based option loading.

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

If optionsDataPath is not provided, VibeFlui checks common array paths:

root array
data.items
data
items
results
options

Option normalization

Options can be primitives or objects.

JSON

["admin", "editor", "viewer"]

JSON

[
  { "name": "Admin", "id": "admin" },
  { "name": "Editor", "id": "editor" }
]

Use optionLabelKey and optionValueKey when the object keys are not label and value.