UI Field - Vextro Docs

The UI field renders a custom component in the admin editor without storing any data. It is useful for displaying help text, previews, interactive widgets, or contextual warnings alongside editable fields. UI fields are always read-only and excluded from the database schema.

Config Options

Option	Type	Default	Description
`component`	`string`	required	Registered component name to render
`props`	`Record<string, unknown>`	—	Static props passed to the component
`watchFields`	`string[]`	—	Fields to watch; component re-renders on change
`label`	`string`	—	Optional label above the component
`condition`	`FieldCondition`	—	Condition for showing this component

Example Usage

import { f } from "vextro";

const fields = {
  helpText: f.ui({
    component: "HelpText",
    props: {
      title: "Publishing Guidelines",
      content: "Review content before setting status to published.",
    },
  }),
  title: f.text({ required: true }),
  body: f.richText(),

  preview: f.ui({
    component: "DocumentPreview",
    watchFields: ["title", "body"],
    label: "Preview",
  }),
};

Watch Fields

The watchFields option re-renders the component whenever the specified field values change. This enables live previews and reactive displays.

Custom Components

UI field components are Svelte components registered in the admin configuration. They receive VextroFieldProps plus any additional props. Components use semantic tokens (text-fg, bg-surface, border-edge) for dark mode support.

Conditional Display

UI fields support the condition system for contextual display, so help text or warnings appear only when relevant:

No stored data

UI fields do not create a column in the Convex table. They are skipped during validation, submission, and import/export.