On this page

Checkboxes field

The checkboxes field stores an array of strings representing multiple choices.

Checkboxes field


Here's an example of using the checkboxes field in a block:

# blocks/IconBox.vue

    <div v-if="tags?.length" class="flex gap-2">
      <span v-for="tag in tags">{{ choices[tag] }}</span>

<script lang="ts" setup>
import { checkboxesField } from '#pruvious'

const choices = {
  'new-arrivals': 'New arrivals',
  'best-sellers': 'Best sellers',
  'on-sale': 'On sale',

  tags: checkboxesField({
    default: ['new-arrivals'],

Here is another example of how to use it in a collection definition:

# collections/products.ts

import { defineCollection } from '#pruvious'

export default defineCollection({
  name: 'products',
  mode: 'multi',
  fields: {
    tags: {
      type: 'checkboxes',
      options: {
        choices: {
          'new-arrivals': 'New arrivals',
          'best-sellers': 'Best sellers',
          'on-sale': 'On sale',
        default: ['new-arrivals'],
    // ...


You can specify the following options in the checkboxes field (required fields are marked with the symbol R):


choices R

A key-value object containing permissible choices, where the key represents the choice value, and the value represents the corresponding checkbox label.


The default field value ([] if not defined).


A brief descriptive text displayed in code comments and in a tooltip at the upper right corner of the field.


The field label displayed in the UI. By default, it is automatically generated based on the property name assigned to the field. For example, availableSizes becomes Available sizes.


A string that specifies the name for the input controls. If not specified, the name attribute will be automatically generated.


A stringified TypeScript type used for overriding the automatically generated field value type. This feature is only applicable when declaring the field in a collection.


Indicates whether the field input is mandatory, meaning it must be present during creation, and at least one value must be selected.


Indicates whether the checkboxes are sortable.

Last updated on January 6, 2024 at 14:00