Checkbox Field - Vextro Docs

The checkbox field renders a single checkbox input in the admin UI and stores its value as a boolean in Convex. Use it for toggles, flags, opt-ins, and any binary on/off state. The underlying Convex validator is v.boolean(), 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.
`label`	`string`	Auto-generated	Label text displayed next to the checkbox.
`defaultValue`	`boolean`	`false`	Initial value for newly created documents.
`readOnly`	`boolean`	`false`	Renders the checkbox as disabled.
`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 posts = defineVextroCollection({
  slug: "posts",
  label: "Posts",
  collectionType: "content",
  tableName: "posts",
  fields: {
    title: f.text({ required: true }),
    body: f.richText(),
    featured: f.checkbox({
      label: "Feature this post",
      description: "Featured posts appear on the homepage hero section.",
      sidebar: true,
      sidebarSection: "document",
      listColumn: true,
      listColumnWidth: "small",
    }),
    allowComments: f.checkbox({
      label: "Allow comments",
      defaultValue: true,
      sidebar: true,
      sidebarSection: "document",
    }),
  },
});

Admin behavior

The checkbox field renders as a single <input type="checkbox"> element with its label positioned to the right. Unlike most other fields where the label sits above the input, the checkbox label appears inline next to the toggle for a compact layout. In list views, checkbox columns display a check icon or empty state rather than the raw boolean value.

Checkbox fields do not support the placeholder option because the control has no text input. Set defaultValue: true when new documents should begin checked; the default is applied before conditional fields are evaluated.

Driving conditional fields

Checkboxes are commonly used as the trigger for conditional fields. Other fields can reference a checkbox to control their visibility:

hasDiscount: f.checkbox({
  label: "Apply discount",
}),
discountPercent: f.number({
  min: 1,
  max: 100,
  required: true,
  condition: { field: "hasDiscount", equals: true },
}),
discountCode: f.text({
  placeholder: "SAVE20",
  condition: { field: "hasDiscount", equals: true },
}),

When hasDiscount is unchecked, both discountPercent and discountCode are hidden. When checked, they appear and discountPercent enforces its required validation.