Email Field - Vextro Docs

The email field renders an email-specific text input in the admin UI and stores its value as a string in Convex. It applies email validation styling and browser-native email input behavior. The underlying Convex validator is v.string(), wrapped in v.optional() when the field is not required.

Config options

Option	Type	Default	Description
`required`	`boolean`	`false`	Makes the field required in both the schema and the admin UI.
`placeholder`	`string`	—	Placeholder text shown when the input is empty.
`readOnly`	`boolean`	`false`	Renders the input as disabled.
`label`	`string \| (data) => string`	Auto-generated	Custom label for the admin UI.
`description`	`string`	—	Help text displayed below the label.
`condition`	`FieldCondition`	—	Conditionally show or hide this field.
`sidebar`	`boolean`	`false`	Place this field in the document sidebar.
`listColumn`	`boolean`	`false`	Show as a default column in list views.
`searchable`	`boolean`	`false`	Index this field for full-text search.

Example usage

import { f, defineVextroCollection } from "vextro";

export const contacts = defineVextroCollection({
  slug: "contacts",
  label: "Contacts",
  collectionType: "content",
  tableName: "contacts",
  fields: {
    name: f.text({ required: true }),
    email: f.email({
      required: true,
      placeholder: "name@example.com",
      listColumn: true,
      searchable: true,
    }),
    alternateEmail: f.email({
      label: "Alternate Email",
      description: "Secondary contact email address.",
    }),
  },
});

Admin behavior

The email field renders as an <input type="email"> element, which enables native browser email validation and appropriate keyboard layout on mobile devices. The admin UI displays a validation error when the entered value does not match a valid email format.

Conditional display

invoiceEmail: f.email({
  required: true,
  placeholder: "billing@example.com",
  condition: { field: "sendInvoice", equals: true },
}),

When a condition is set, the field is always optional in the Convex schema regardless of the required setting. The required validation only applies when the field is visible.