Checkbox field
The checkbox field is a fundamental field that stores a boolean value.
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:
Option | Description |
---|---|
| The default field value ( |
| A brief descriptive text displayed in code comments and in the tooltip when hovering over the field 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. |
| A string that specifies the |
| Indicates whether the field input is mandatory, requiring its presence during creation, with the value set to |
Last updated on January 5, 2024 at 20:23