Checkbox

<pa-checkbox> | PaCheckbox

A form control component that allows users to select one or more options from a set. Checkboxes are ideal for forms where multiple selections are permitted and users can toggle individual options on or off.

<pa-checkbox>Accept terms and conditions</pa-checkbox>

Examples

Basic Usage

I agree to the terms and conditions

<template>
  <pa-checkbox v-model="accepted">
    I agree to the terms and conditions
  </pa-checkbox>
</template>

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

const accepted = ref(false)
</script>

Checkbox Groups

Checkboxes may work together in pa-checkbox-groups.

Choose your notifications

Email notifications

SMS notifications

Push notifications

Newsletter (coming soon)

<template>
  <pa-checkbox-group label="Choose your notifications">
    <pa-checkbox v-model="notifications.email">
      Email notifications
    </pa-checkbox>
    <pa-checkbox v-model="notifications.sms">
      SMS notifications
    </pa-checkbox>
    <pa-checkbox v-model="notifications.push">
      Push notifications
    </pa-checkbox>
    <pa-checkbox disabled>
      Newsletter (coming soon)
    </pa-checkbox>
  </pa-checkbox-group>
</template>

Sizes

Use the size prop to change the checkbox size.

Default size checkbox

Large size checkbox

<template>
  <div>
    <pa-checkbox v-model="defaultSize">Default size checkbox</pa-checkbox>
    <pa-checkbox v-model="largeSize" size="lg">Large size checkbox</pa-checkbox>
  </div>
</template>

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

const defaultSize = ref(false)
const largeSize = ref(false)
</script>

Disabled State

Checkboxes can be disabled to prevent user interaction.

Disabled unchecked

Disabled checked

<template>
  <div>
    <pa-checkbox disabled v-model="disabledUnchecked">
      Disabled unchecked
    </pa-checkbox>
    <pa-checkbox disabled v-model="disabledChecked">
      Disabled checked
    </pa-checkbox>
  </div>
</template>

Indeterminate State

Checkboxes can show an indeterminate state, useful for "select all" functionality.

Select all options

<template>
  <pa-checkbox :indeterminate="true">Select all options</pa-checkbox>
</template>

Importing

import { PaCheckbox } from '@payadvantage/ui_components'

Properties

Name	Description	Reflects	Type	Default
modelValue	The checkbox's checked state (used with v-model).	no	boolean	false
value	The value to emit when checked (useful in groups).	no	string | null	null
size	The checkbox's size.	no	'lg' | null	null
indeterminate	Shows the checkbox in an indeterminate state.	no	boolean	false
disabled	Disables the checkbox.	no	boolean	false
sfSelector	Custom selector for testing frameworks.	no	string	''

Events

Name	Description	Event Detail
update:modelValue	Emitted when the checkbox state changes (for v-model).	New checked state
update:indeterminate	Emitted when the indeterminate state changes.	New indeterminate state

Slots

Name	Description
(default)	The checkbox's label content.

Dependencies

• Bootstrap CSS: Uses Bootstrap's form check styling system for consistent appearance
• Vue 3: Requires Vue 3 for v-model and reactive features
• No external icon dependencies - uses browser default checkbox styling

Design Notes

The checkbox component provides:

• Standard form control: Bootstrap-styled checkbox with consistent spacing
• Multiple sizes: Default and large size variants for different contexts
• Indeterminate state: Tri-state functionality for hierarchical selections
• Form integration: Seamless v-model and validation support

This component is ideal for:

• User preference settings and configuration options
• Multi-selection lists and data filtering
• Terms and agreements acceptance
• Feature toggles and hierarchical selection patterns

Accessibility Notes

• Uses semantic HTML form elements for proper screen reader support
• Maintains focus states for keyboard navigation
• Supports ARIA attributes for enhanced accessibility
• Indeterminate state is properly communicated to assistive technologies
• Label association ensures clickable labels for better usability