Skip to content

Schema Definition

The schema is the heart of Vorm. It defines your form structure, field types, labels, validation, visibility rules, and more — all declaratively.

Basic Structure

A schema is simply an array of field definitions:

ts
const schema = [
  {
    name: "username",
    label: "Username",
    type: "text",
    validation: [{ rule: "required" }],
  },
  {
    name: "email",
    label: "E-Mail",
    type: "email",
    validation: [{ rule: "required" }, { rule: "email" }],
  },
];

Each object describes one field. The name must be unique across the form, including nested levels.

Field Types

Vorm supports the following field types out of the box:

  • text
  • email
  • password
  • number
  • date
  • textarea
  • select
  • checkbox
  • repeater

You can extend this via your own components.

Repeater Fields

type: "repeater" allows you to define repeatable groups of fields. Each repeater has its own fields array:

ts
{
  name: "contacts",
  label: "Contacts",
  type: "repeater",
  fields: [
    { name: "name", type: "text" },
    { name: "phone", type: "text" },
  ]
}

Nested repeaters are fully supported.

Conditional Visibility

You can conditionally show or hide a field using the showIf property:

ts
{
  name: "adminCode",
  label: "Admin Code",
  type: "text",
  showIf: { role: "Admin" },
}

This field is only shown when the value of role is exactly "Admin".

Customization

classes

Each field can define optional classes:

ts
classes: {
  input: "border px-2 py-1",
  label: "text-sm text-gray-600",
  outer: "mb-4",
  help: "text-xs text-red-500"
}

These will be passed to the internal rendering or your own input components.

showError

By default, Vorm shows validation errors. You can disable this per field:

ts
{
  name: "info",
  label: "Info only",
  type: "text",
  showError: false
}

inheritWrapper

This flag determines whether nested fields should inherit slot wrappers from their parent.

ts
{
  name: "contacts",
  type: "repeater",
  fields: [
    { name: "email", type: "text", inheritWrapper: true }
  ]
}

This allows deeply nested fields to use higher-level slot wrappers like wrapper:["email"].

Field Paths

Fields inside repeaters are addressed using bracket notation, like:

contacts[0].name
contacts[1].email

You don't need to define these manually. Vorm builds all paths automatically from your schema.


MIT Licensed