Switch field

The switch field stores a boolean value and can be used as a replacement for the checkbox field.

Examples

Here's an example of using the switch 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 { switchField } from '#pruvious'

defineProps({
  highlightIcon: switchField({
    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: 'switch',
      options: {
        label: 'Show in product list',
        default: true,
      },
    },
    // ...
  },
})

Options

You can specify the following options in the switch field: