Switch

<pa-switch> | PaSwitch

A toggle switch component for enabling or disabling options in your Vue 3 applications. Perfect for settings, preferences, feature toggles, and any interface where users need to toggle between two states with clear visual feedback.

Usage

Use pa-switch to allow users to toggle between enabled and disabled states:

Enable notifications

Status: Enabled

<template>
  <div class="switch-row">
    <pa-switch 
      v-model="isEnabled" 
      size="lg"
    />
    <span class="switch-label">Enable notifications</span>
  </div>
  <p>Status: {{ isEnabled ? 'Enabled' : 'Disabled' }}</p>
</template>

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

const isEnabled = ref(true)
</script>

Examples

Basic Switch

<template>
  <pa-switch v-model="enabled" />
</template>

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

const enabled = ref(false)
</script>

Different Sizes

Small

Medium (default)

Large

<template>
  <div>
    <pa-switch v-model="smallToggle" size="sm" />
    <pa-switch v-model="mediumToggle"/>
    <pa-switch v-model="largeToggle" size="lg" />
  </div>
</template>

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

const smallToggle = ref(false)
const mediumToggle = ref(true)
const largeToggle = ref(false)
</script>

Disabled State

Disabled (off)

Disabled (on)

<template>
  <div>
    <pa-switch v-model="settingOff" disabled />
    <pa-switch v-model="settingOn" disabled />
  </div>
</template>

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

const settingOff = ref(false)
const settingOn = ref(true)
</script>

Importing

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

Properties

Name	Description	Reflects	Type	Default
modelValue	The current value of the switch (true for on, false for off).	no	boolean	false
size	Controls the size of the switch.	no	'sm' | 'md' | 'lg'	'lg'
disabled	Whether the switch is disabled and cannot be toggled.	no	boolean	false
sfSelector	Selector for testing automation.	no	string	''

Events

Name	Description	Event Detail
update:modelValue	Emitted when the switch value changes. Use with v-model for two-way data binding.	boolean - The new value of the switch

Dependencies

None - this is a standalone component that can be used independently.