On this page

Button group field

The button group field is useful for displaying a few choices that users can switch quickly.

Button group field


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

# blocks/AlignText.vue

  <div :style="{ textAlign: position }">

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

  position: buttonGroupField({
    choices: {
      left: 'Left',
      center: 'Center',
      right: 'Right',
    default: 'center',
    required: 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: {
    size: {
      type: 'button-group',
      options: {
        choices: {
          S: 'Small',
          M: 'Medium',
          L: 'Large',
        default: 'M',
        required: true,
    // ...


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


choices R

A key-value object containing permissible choices, where the key represents the choice value, and the value represents the corresponding label.


The default field value (null if not defined).


A brief descriptive text displayed in code comments and in a tooltip at the upper right corner of the field.


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


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


A stringified TypeScript type used for overriding the automatically generated field value type. This feature is only applicable when declaring the field in a collection.


Specifies that the field input is mandatory during creation.

Last updated on January 5, 2024 at 20:26