Number Field - Vextro Docs

The number field renders a numeric input in the admin UI and stores its value as a number in Convex. Use it for prices, quantities, ratings, sort order, and any numeric data. The underlying Convex validator is v.number(), 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.
`min`	`number`	—	Minimum allowed value.
`max`	`number`	—	Maximum allowed value.
`step`	`number`	—	Step increment for the input (e.g., `0.01` for currency).
`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.

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 }),
    price: f.number({
      required: true,
      min: 0,
      step: 0.01,
      placeholder: "0.00",
      label: "Price ($)",
      listColumn: true,
    }),
    stock: f.number({
      min: 0,
      step: 1,
      description: "Current inventory count.",
    }),
    sortOrder: f.number({
      sidebar: true,
      sidebarSection: "meta",
      description: "Lower numbers appear first.",
    }),
  },
});

Admin behavior

The number field renders as an <input type="number"> element. The min, max, and step attributes are applied directly to the HTML input, providing native browser validation and increment controls. Values in list columns use font-variant-numeric: tabular-nums for consistent columnar alignment.

Conditional display

discountPercent: f.number({
  min: 1,
  max: 100,
  step: 1,
  label: "Discount (%)",
  condition: { field: "hasDiscount", 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.