On this page

Checkbox field

The checkbox field is a fundamental field that stores a boolean value.

Checkbox field

Examples

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

# blocks/IconBox.vue

<template>
  <div>
    <SomeIcon
      :class="{
        'h-6 w-6': !highlightIcon,
        'h-12 w-12': highlightIcon,
      }"
    />
    ...
  </div>
</template>

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

defineProps({
  highlightIcon: checkboxField({
    label: 'Make icon stand out',
    default: true,
  }),
})
</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: {
    active: {
      type: 'checkbox',
      options: {
        label: 'Show in product list',
        default: true,
      },
    },
    // ...
  },
})

Options

You can specify the following options in the checkbox field:

OptionDescription

default

The default field value (false if not defined).

description

A brief descriptive text displayed in code comments and in the tooltip when hovering over the field label.

label

Text to display on the right side of the input control. By default, it is automatically generated based on the property name assigned to the field. For example, darkMode becomes Dark mode.

name

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

required

Indicates whether the field input is mandatory, requiring its presence during creation, with the value set to true.

Last updated on January 5, 2024 at 20:23