Text Field - Vextro Docs

The text field renders a single-line text input in the admin UI and stores its value as a string in Convex. Use it for titles, names, short labels, and any content that fits on one line. 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.
`maxCharacters`	`number`	—	Maximum number of characters allowed. Displays a hint below the label and enforces the limit via the native `maxlength` attribute.
`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 products = defineVextroCollection({
  slug: "products",
  label: "Products",
  collectionType: "content",
  tableName: "products",
  fields: {
    name: f.text({
      required: true,
      placeholder: "Product name",
      listColumn: true,
      searchable: true,
    }),
    sku: f.text({
      label: "SKU",
      placeholder: "ABC-12345",
      readOnly: false,
    }),
    subtitle: f.text({
      description: "A short tagline shown below the product name.",
      maxCharacters: 120,
    }),
  },
});

Character limit

When maxCharacters is set, the admin UI displays a "Max N chars" hint below the label and enforces the limit using the native HTML maxlength attribute. This prevents the user from typing beyond the specified length.

tagline: f.text({ maxCharacters: 60 })

Admin behavior

The text field renders as a standard <input type="text"> element. When searchable is enabled, the field value is indexed for collection-level search queries. When listColumn is enabled, the value appears as a column in the collection list view.

Conditional display

nickname: f.text({
  placeholder: "Display name",
  condition: { field: "useNickname", 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.