On this page

Switch field

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

Switch field


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

# blocks/IconBox.vue

        'h-6 w-6': !highlightIcon,
        'h-12 w-12': highlightIcon,

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

  highlightIcon: switchField({
    label: 'Make icon stand out',
    default: true,

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,
    // ...


You can specify the following options in the switch field:



The default field value (false if not defined).


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


The label for the false value. Defaults to No.


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


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


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


The label for the true value. Defaults to Yes.

Last updated on January 7, 2024 at 15:58