Checkboxes field

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

Examples

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

# blocks/IconBox.vue

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

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

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

defineProps({
  tags: checkboxesField({
    choices,
    default: ['new-arrivals'],
  }),
})
</script>

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'],
      },
    },
    // ...
  },
})

Options

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