Field Adapters

Field adapters replace the default form field renderer for specific field types or integrations.

Use field adapters for UI libraries such as React Select, custom date pickers, code editors, rich text editors, markdown editors, and other input controls.

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",
        adapter: "react-select",
        optionLoader: "roles.options"
      }
    ]
  },
  registry: {
    fieldAdapters: ["react-select"],
    optionLoaders: ["roles.options"]
  }
} as const;

Runtime registry

components/vibeflui/fields/ReactSelectSingleField.tsx

TSX

import Select from "react-select";
import type { FluiKitRuntimeComponentProps } from "@vibeflui/core";

export function ReactSelectSingleField({ value, options, onChange }: FluiKitRuntimeComponentProps) {
  const selectOptions = options as Array<{ label: string; value: string }>;

  return (
    <Select
      value={selectOptions.find((option) => option.value === value) ?? null}
      options={selectOptions}
      onChange={(option) => onChange?.(option?.value)}
    />
  );
}

lib/vibeflui/registry.tsx

TSX

import { createRegistry } from "@vibeflui/core";
import { ReactSelectSingleField } from "@/components/vibeflui/fields/ReactSelectSingleField";

export const registry = createRegistry({
  fieldAdapters: {
    "react-select": ReactSelectSingleField
  },
  optionLoaders: {
    "roles.options": async () => [
      { label: "Admin", value: "admin" },
      { label: "Editor", value: "editor" }
    ]
  }
});

Keep JSX in component files. The registry should wire imported components and functions to string keys.

Adapter property vs component property

Use adapter when replacing how a field input behaves.

schemas/users/user-fields.ts

{
  name: "roleId",
  type: "select",
  adapter: "react-select"
}

Use component when a field needs a custom component reference that the field system can resolve.

schemas/users/user-fields.ts

{
  name: "body",
  type: "markdown",
  component: "custom.markdownEditor"
}

react-select is the default adapter key registered by @vibeflui/react-select, and markdown is the default markdown adapter key registered by @vibeflui/editors. Custom keys are also valid when the runtime registry provides matching fieldAdapters or components.

Dark mode

Adapter docs should include dark mode notes when the underlying library needs extra styles. React Select, rich text editors, code editors, and markdown editors often require library-specific dark mode handling.