Custom Field - Vextro Docs

The custom field system lets you extend Vextro with your own field types. A custom field combines a raw Convex validator with a registered admin type, letting you provide a custom Svelte component for rendering and custom validation logic.

Config Options

f.custom() accepts three arguments:

Argument	Type	Description
`validator`	`Validator`	Convex validator defining the stored data shape
`adminType`	`string`	Registered field type name for component lookup
`config`	`Record<string, unknown>`	Optional config passed to the component

Example Usage

import { f } from "vextro";
import { v } from "convex/values";

const fields = {
  address: f.custom(
    v.object({ street: v.string(), city: v.string(), zip: v.string() }),
    "address",
    { required: true }
  ),
};

Registering a Field Type

Register your custom type so the admin knows how to render and validate it. The registration object supports type, label, component (Svelte component path), validate, transformForSubmit, and transformFromDb.

import { registerFieldType } from "vextro/fields/custom";

registerFieldType({
  type: "address",
  label: "Address",
  component: "./components/AddressField.svelte",
  validate: (value, config) => {
    if (!value) return config?.required ? "Address is required" : null;
    const addr = value as { street: string; city: string; zip: string };
    if (!addr.street) return "Street is required";
    return null;
  },
});

Custom Component

Custom components are Svelte 5 components that accept VextroFieldProps<T>. They manage local state with $state, serialize to a hidden input via $derived, and display validation errors from the errors prop.

Registry Helpers

Query registered types at runtime with hasFieldType(type), getFieldType(type), and getAllFieldTypes() from vextro/fields/custom.