Field Types

field.type controls the native input, adapter, or custom rendering strategy.

Supported types

Type	Runtime rendering
`text`	Text input.
`email`	Email input plus built-in email validation.
`password`	Password input.
`number`	Number input, emits number or empty string.
`textarea`	Multiline text area.
`select`	Native select.
`multiselect`	Native multiple select.
`checkbox`	Normal boolean checkbox.
`switch`	Boolean sliding toggle for toggle, on-off, and slide controls.
`radio`	Single selection from options.
`radio-group`	Single selection from options.
`checkbox-group`	Multiple selections from options.
`date`	Date input.
`datetime`	`datetime-local` input.
`time`	Time input.
`file`	File input.
`image`	File input with `accept="image/*"`.
`hidden`	Hidden input.
`color`	Color input.
`range`	Range input, emits number or empty string.
`json`	Textarea with monospace style, unless an adapter overrides it — for example `adapter: "editorjs"` from `@vibeflui/editors` swaps in an Editor.js block editor (see `Editors`).
`code`	Textarea with monospace style.
`richtext`	Textarea unless an adapter/component overrides it.
`markdown`	Textarea unless an adapter/component overrides it.
`tags`	Comma-separated text input, emits `string[]`.
`combobox`	Text input with `datalist`.
`autocomplete`	Text input with `datalist`.
`custom`	Registry component or missing-component placeholder.

Boolean and option controls

Use switch for toggle, on-off, and slide UI. Use checkbox for a normal checkbox. Use checkbox-group when the user can choose multiple option values. Use radio or radio-group when the user chooses one option value. Do not use checkbox-toggle; it is not an official field type in the current source.

schemas/users/user-preferences.schema.ts

export const userPreferencesSchema = {
  resource: "users",
  form: {
    fields: [
      { name: "enabled", label: "Enabled", type: "switch", defaultValue: true },
      { name: "acceptedTerms", label: "Accepted Terms", type: "checkbox" },
      {
        name: "contactMethod",
        label: "Contact Method",
        type: "radio-group",
        options: [
          { label: "Email", value: "email" },
          { label: "SMS", value: "sms" }
        ]
      },
      {
        name: "notificationChannels",
        label: "Notification Channels",
        type: "checkbox-group",
        options: [
          { label: "Email", value: "email" },
          { label: "SMS", value: "sms" }
        ]
      }
    ]
  }
} as const;

Type inference

String fields are expanded automatically.

form: {
  fields: ["name", "email", "password", "isEnabled", "createdAt"]
}

VibeFlui infers common field types from the field name:

Name pattern	Inferred type
contains `email`	`email`
contains `password`	`password`
ends with `id`, contains `count`, contains `total`	`number`
contains `description`, `notes`, or `content`	`textarea`
contains `date` or ends with `at`	`date`
starts with `is`, starts with `has`, contains `enabled`	`checkbox`
otherwise	`text`

Name-based inference preserves the current source behavior and maps boolean-looking names to checkbox. Use an explicit type: "switch" when the field should render as a sliding toggle.

Explicit field types

export const usersSchema = {
  resource: "users",
  form: {
    fields: [
      { name: "email", type: "email" },
      { name: "age", type: "number" },
      { name: "bio", type: "textarea" },
      { name: "status", type: "select" },
      { name: "permissions", type: "checkbox-group" },
      { name: "metadata", type: "json" }
    ]
  }
} as const;