Option Group

<pa-option-group> | PaOptionalGroup

A styled checkbox component that groups related content together. The Option Group provides a visually distinct container that becomes activated when checked, making it ideal for optional sections, feature toggles, or conditional form areas in your Vue 3 applications.

DEV

This needs work what is this what is it for and I believe it's incorrectly named in the codebase as optional-group, with an 'al'.

Usage

Use Option Group when you need to make entire sections of content conditional or to group related options that can be enabled/disabled as a unit.

Email Notifications

<template>
  <pa-option-group 
    v-model="enableNotifications" 
    label="Email Notifications"
  >
    <pa-input 
      label="Email Address" 
      placeholder="your.email@example.com"
      type="email"
    />
    <pa-checkbox label="Daily digest" />
    <pa-checkbox label="Weekly summary" />
  </pa-option-group>
</template>

<script setup>
import { ref } from 'vue'

const enableNotifications = ref(false)
</script>

Examples

Basic Example

Optional Feature

This content is only relevant when the option is enabled.

<template>
  <pa-option-group 
    v-model="basicValue" 
    label="Optional Feature"
  >
    <p>This content is only relevant when the option is enabled.</p>
  </pa-option-group>
</template>

<script setup>
import { ref } from 'vue'

const basicValue = ref(false)
</script>

Interactive Example

Full Name

*

Newsletter Subscription

Email Address

*

Form Data:

{
  "name": "",
  "wantsNewsletter": false,
  "email": "",
  "weeklyDigest": false,
  "monthlyNews": false
}

<template>
  <form @submit.prevent="handleSubmit">
    <pa-input 
      v-model="formData.name"
      label="Full Name" 
      required
    />
    
    <pa-option-group 
      v-model="formData.wantsNewsletter" 
      label="Newsletter Subscription"
    >
      <pa-input 
        v-model="formData.email"
        label="Email Address" 
        type="email"
        placeholder="your.email@example.com"
      />
      <div style="margin-top: 16px;">
        <pa-checkbox v-model="formData.weeklyDigest" label="Weekly digest" />
        <pa-checkbox v-model="formData.monthlyNews" label="Monthly news" />
      </div>
    </pa-option-group>
    
    <pa-button type="submit" variant="primary">
      Submit Registration
    </pa-button>
  </form>
</template>

<script setup>
import { reactive } from 'vue'

const formData = reactive({
  name: '',
  wantsNewsletter: false,
  email: '',
  weeklyDigest: false,
  monthlyNews: false
})

const handleSubmit = () => {
  console.log('Form submitted:', formData)
  // Only include email preferences if newsletter is enabled
  const submitData = {
    name: formData.name,
    ...(formData.wantsNewsletter && {
      email: formData.email,
      preferences: {
        weeklyDigest: formData.weeklyDigest,
        monthlyNews: formData.monthlyNews
      }
    })
  }
  // Submit to API
}
</script>

Importing

import { PaOptionalGroup } from 'pa-components'

Slots

Slot Name	Description
default	Content that appears inside the option group container when expanded

Properties

Property	Type	Default	Description
modelValue	Boolean	false	Controls the checked state of the option group
label	String	''	The text label displayed next to the checkbox
disabled	Boolean	false	Disables the checkbox and prevents user interaction
required	Boolean	false	Marks the field as required for form validation
sfSelector	String	''	CSS selector for testing frameworks

Events

Event	Parameters	Description
update:modelValue	value: boolean	Emitted when the checkbox state changes, enabling v-model support

Dependencies

Bootstrap 5 - Provides base form styling and layout classes.