Checkbox Group

<pa-checkbox-group> | PaCheckboxGroup

A container component that groups multiple checkboxes together with shared validation logic. Perfect for multi-select scenarios where users need to choose one or more options from a list, with built-in validation for minimum/maximum selection requirements.

<pa-checkbox-group label="Notification Preferences">
  <pa-checkbox value="email">Email notifications</pa-checkbox>
  <pa-checkbox value="sms">SMS notifications</pa-checkbox>
  <pa-checkbox value="push">Push notifications</pa-checkbox>
</pa-checkbox-group>

Usage

Use pa-checkbox-group to group related checkboxes that share validation rules and provide a collective label:

Choose your interests

Sports

Music

Travel

Technology

<template>
  <pa-checkbox-group 
    label="Choose your interests"
    @update:checkedValues="onSelectionChange"
  >
    <pa-checkbox value="sports">Sports</pa-checkbox>
    <pa-checkbox value="music">Music</pa-checkbox>
    <pa-checkbox value="travel">Travel</pa-checkbox>
    <pa-checkbox value="technology">Technology</pa-checkbox>
  </pa-checkbox-group>
</template>

<script setup>
const onSelectionChange = (selectedValues) => {
  console.log('Selected values:', selectedValues)
}
</script>

Examples

Interactive Example with Validation

<template>
  <div>
    <!-- Basic Usage -->
    <pa-checkbox-group 
      label="Choose your interests"
      @update:checkedValues="handleSelection"
    >
      <pa-checkbox value="sports">Sports</pa-checkbox>
      <pa-checkbox value="music">Music</pa-checkbox>
      <pa-checkbox value="travel">Travel</pa-checkbox>
    </pa-checkbox-group>

    <!-- With Validation -->
    <pa-checkbox-group 
      label="Select notification preferences (2-3 required)" 
      :minlength="2"
      :maxlength="3"
      required
      @update:checkedValues="handleValidatedSelection"
    >
      <pa-checkbox value="email">Email notifications</pa-checkbox>
      <pa-checkbox value="sms">SMS alerts</pa-checkbox>
      <pa-checkbox value="newsletter">Weekly newsletter</pa-checkbox>
      <pa-checkbox value="promotions">Promotional offers</pa-checkbox>
    </pa-checkbox-group>

    <!-- Disabled State -->
    <pa-checkbox-group label="Premium Features (Coming Soon)" disabled>
      <pa-checkbox value="analytics">Advanced Analytics</pa-checkbox>
      <pa-checkbox value="reporting">Custom Reports</pa-checkbox>
    </pa-checkbox-group>
  </div>
</template>

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

const basicSelection = ref([])
const validatedSelection = ref([])

const handleSelection = (values) => {
  basicSelection.value = values
  console.log('Basic selection:', values)
}

const handleValidatedSelection = (values) => {
  validatedSelection.value = values
  console.log('Validated selection:', values)
}
</script>

Importing

import { PaCheckboxGroup } from '@payadvantage/ui-components'

Slots

Name	Description
default	Contains the pa-checkbox components that belong to this group

Properties

Name	Type	Default	Description
label	string	''	Label text displayed above the checkbox group
disabled	boolean	false	Disables the entire group and all child checkboxes
required	boolean	false	Makes at least one selection required for validation
minlength	number	null	Minimum number of checkboxes that must be selected
maxlength	number	null	Maximum number of checkboxes that can be selected

Events

Name	Parameters	Description
update:checkedValues	values: string[]	Emitted when the selection changes, contains array of selected checkbox values

Methods

Method	Parameters	Description
setCheckedValue	value: string, checked: boolean	Programmatically set the checked state of a specific checkbox
getValueForValidation	None	Returns the current selection as an array for validation purposes

Dependencies

• PaIcon - Used for validation error display
• PaCheckbox - Child components that belong to the group