PaRadioGroup

A flexible radio button group component that provides an intuitive way for users to select a single option from a set of mutually exclusive choices. Perfect for forms, settings, and configuration interfaces.

Basic Usage

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>

Plan Selection Example

Radio groups are commonly used for plan or pricing selections:

Choose a subscription plan

Basic - $9.99/month

Premium - $19.99/month

Enterprise - $49.99/month

Selected plan: None selected

<template>
  <pa-radio-group 
    label="Choose a subscription plan" 
    v-model:selectedValue="selectedPlan"
  >
    <pa-radio value="basic" label="Basic - $9.99/month" />
    <pa-radio value="premium" label="Premium - $19.99/month" />
    <pa-radio value="enterprise" label="Enterprise - $49.99/month" />
  </pa-radio-group>
</template>

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

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

Required Field Example

Show validation states and required indicators:

Account Type (Required)

Personal Account

Business Account

Non-profit Organization

Account type: Required - please select

<template>
  <pa-radio-group 
    label="Account Type (Required)" 
    v-model:selectedValue="accountType"
    required
  >
    <pa-radio value="personal" label="Personal Account" />
    <pa-radio value="business" label="Business Account" />
    <pa-radio value="nonprofit" label="Non-profit Organization" />
  </pa-radio-group>
</template>

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

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

Disabled State

Radio groups can be disabled entirely or have individual options disabled:

Disabled Options

Option 1 (Disabled)

Option 2 (Disabled)

Option 3 (Disabled)

All options are disabled

<template>
  <div class="space-y-4">
    <!-- Entirely disabled -->
    <pa-radio-group
      label="Disabled Options"
      v-model:selectedValue="disabledValue"
      disabled
    >
      <pa-radio value="option1" label="Option 1 (Disabled)" />
      <pa-radio value="option2" label="Option 2 (Disabled)" />
      <pa-radio value="option3" label="Option 3 (Disabled)" />
    </pa-radio-group>
    
    <!-- Individual options disabled -->
    <pa-radio-group
      label="Some Options Disabled"
      v-model:selectedValue="partialValue"
    >
      <pa-radio value="available1" label="Available Option" />
      <pa-radio value="disabled1" label="Disabled Option" disabled />
      <pa-radio value="available2" label="Another Available Option" />
    </pa-radio-group>
  </div>
</template>

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

const disabledValue = ref('')
const partialValue = ref('')
</script>

Form Integration

Radio groups integrate seamlessly with form validation:

Email Frequency

Daily updates

Weekly digest

Monthly summary

No emails

Current Settings:
Email Frequency: Not selected

<template>
  <form @submit.prevent="handleSubmit">
    <div class="space-y-4">
      <pa-radio-group
        label="Email Frequency"
        v-model:selectedValue="emailFrequency"
        required
      >
        <pa-radio value="daily" label="Daily updates" />
        <pa-radio value="weekly" label="Weekly digest" />
        <pa-radio value="monthly" label="Monthly summary" />
        <pa-radio value="never" label="No emails" />
      </pa-radio-group>
      
      <button type="submit" class="btn btn-primary">
        Save Preferences
      </button>
    </div>
  </form>
</template>

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

const emailFrequency = ref('')

function handleSubmit() {
  if (emailFrequency.value) {
    console.log('Form submitted:', { emailFrequency: emailFrequency.value })
  }
}
</script>

Properties

Property	Type	Default	Description
selectedValue	string | number	undefined	The selected value (v-model:selectedValue)
label	string	undefined	Label for the radio group
required	boolean	false	Whether the field is required
disabled	boolean	false	Whether the entire group is disabled

Events

Event	Payload	Description
update:selectedValue	string | number	Emitted when selection changes

Slots

Slot	Props	Description
default	-	Content area for pa-radio components

PaRadio Properties

When using individual pa-radio components within the group:

Property	Type	Default	Description
value	string	required	The value to emit when this radio is selected
label	string	undefined	Label text for the radio button
disabled	boolean	false	Whether this individual radio is disabled

Accessibility

PaRadioGroup is built with accessibility in mind:

• ARIA Labels: Proper role="radiogroup" and aria-labelledby attributes
• Keyboard Navigation: Arrow keys navigate between options, Space/Enter selects
• Screen Reader Support: Clear announcements of selection changes
• Focus Management: Proper focus indicators and tab order
• Required Indication: Accessible required field indicators

Keyboard Shortcuts

• Tab - Move focus to/from the radio group
• Arrow Keys - Navigate between radio options
• Space/Enter - Select the focused option

Usage Notes

Use radio groups when users need to select exactly one option from a set of choices. For multiple selections, use checkboxes instead. For binary choices, consider using a toggle or switch.

Common use cases include plan selection, user preferences, survey questions, and form fields requiring single selections.

Related Components

• PaRadio - Individual radio button component
• PaCheckboxGroup - For multiple selections
• PaDropdown - Alternative for many options
• PaToggle - For binary choices