URL Field - Vextro Docs

The URL field renders a URL-specific text input in the admin UI and stores its value as a string in Convex. It applies URL validation styling and browser-native URL input behavior. Use it for website links, API endpoints, social media profiles, and any field that should contain a valid URL. 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 companies = defineVextroCollection({
  slug: "companies",
  label: "Companies",
  collectionType: "content",
  tableName: "companies",
  fields: {
    name: f.text({ required: true }),
    website: f.url({
      placeholder: "https://example.com",
      listColumn: true,
    }),
    linkedIn: f.url({
      label: "LinkedIn",
      placeholder: "https://linkedin.com/company/...",
    }),
    apiEndpoint: f.url({
      label: "API Endpoint",
      readOnly: true,
      description: "Auto-generated webhook URL for this company.",
    }),
  },
});

Admin behavior

The URL field renders as an <input type="url"> element, which enables native browser URL validation. The admin UI displays a validation error when the entered value is not a well-formed URL. On mobile devices, the keyboard layout adjusts to include common URL characters like /, ., and :.

Conditional display

externalUrl: f.url({
  required: true,
  placeholder: "https://...",
  condition: { field: "linkType", equals: "external" },
}),

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.