Textarea Field - Vextro Docs

The textarea field renders a multi-line text input in the admin UI and stores its value as a string in Convex. Use it for descriptions, summaries, notes, and any content that benefits from multiple lines of input. 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.
`rows`	`number`	—	Number of visible text rows for the textarea element.
`placeholder`	`string`	—	Placeholder text shown when the input is empty.
`readOnly`	`boolean`	`false`	Renders the textarea 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 articles = defineVextroCollection({
  slug: "articles",
  label: "Articles",
  collectionType: "content",
  tableName: "articles",
  fields: {
    title: f.text({ required: true }),
    excerpt: f.textarea({
      rows: 3,
      placeholder: "Brief summary of the article...",
      searchable: true,
      description: "Shown in search results and social cards.",
    }),
    internalNotes: f.textarea({
      rows: 6,
      label: "Internal Notes",
      description: "Not visible to the public.",
    }),
  },
});

Admin behavior

The textarea field renders as a standard <textarea> element. The rows option controls the initial visible height. The textarea is resizable by default in the admin UI, so rows sets the starting size rather than a fixed height.

Conditional display

rejectionReason: f.textarea({
  rows: 4,
  required: true,
  placeholder: "Explain why this was rejected...",
  condition: { field: "status", equals: "rejected" },
}),

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.