Button group field

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

Examples

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

# blocks/AlignText.vue

<template>
  <div :style="{ textAlign: position }">
    ...
  </div>
</template>

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

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

Options

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