PaRadio

Individual radio button component designed to be used within PaRadioGroup. This component is not typically used standalone - use PaRadioGroup for most radio button implementations.

Usage with PaRadioGroup

Preferred Contact Method

Email

Phone

SMS

Selected: None

<template>
  <pa-radio-group 
    label="Preferred Contact Method" 
    v-model:selectedValue="selectedMethod"
  >
    <pa-radio value="email" label="Email" />
    <pa-radio value="phone" label="Phone" />
    <pa-radio value="sms" label="SMS" />
  </pa-radio-group>
</template>

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

const selectedMethod = ref('')
</script>

Importing

import { PaRadio, PaRadioGroup } from '@payadvantage/ui-components'

Properties

Property	Type	Default	Description
value	string	required	The value to emit when this radio is selected
label	string	''	Label text for the radio button
disabled	boolean	false	Whether the radio button is disabled
required	boolean	false	Whether the radio button is required for validation
size	'sm' | 'lg'	'sm'	Size of the radio button

Usage Notes

PaRadio is designed to be used within PaRadioGroup containers. The radio group manages the selected state and ensures only one option can be selected at a time.

For most use cases, use PaRadioGroup which provides the complete radio button functionality.

Related Components

• PaRadioGroup - Complete radio button group implementation (recommended)
• PaCheckbox - For true/false selections
• PaToggle - For binary on/off controls