Migrating from ghl-ui RadioGroup to HighRise RadioGroup

This guide will help you migrate from the ghl-ui RadioGroup component to the new HighRise RadioGroup component.

Component Implementation Changes

Import Changes

- import { UIRadioGroup, UIRadio } from '@gohighlevel/ghl-ui'
+ import { HLRadioGroup, HLRadio } from '@platform-ui/highrise'

Basic Usage Changes

- <UIRadioGroup
-   v-model="selectedValue"
- >
-   <UIRadio value="1">Option 1</UIRadio>
-   <UIRadio value="2">Option 2</UIRadio>
-   <UIRadio value="3">Option 3</UIRadio>
- </UIRadioGroup>

+ <HLRadioGroup
+   id="radio-group"
+   v-model:value="selectedValue"
+ >
+   <HLRadio value="1">Option 1</HLRadio>
+   <HLRadio value="2">Option 2</HLRadio>
+   <HLRadio value="3">Option 3</HLRadio>
+ </HLRadioGroup>

Form Integration Changes

- <UIForm :model="formModel">
-   <UIFormItem label="Gender">
-     <UIRadioGroup
-       v-model="formModel.gender"
-     >
-       <UIRadio value="male">Male</UIRadio>
-       <UIRadio value="female">Female</UIRadio>
-       <UIRadio value="other">Other</UIRadio>
-     </UIRadioGroup>
-   </UIFormItem>
- </UIForm>

+ <HLForm :model="formModel" :rules="rules">
+   <HLFormItem
+     label="Gender"
+     path="gender"
+     required
+   >
+     <HLRadioGroup
+       id="gender-group"
+       v-model:value="formModel.gender"
+     >
+       <HLRadio value="male">Male</HLRadio>
+       <HLRadio value="female">Female</HLRadio>
+       <HLRadio value="other">Other</HLRadio>
+     </HLRadioGroup>
+   </HLFormItem>
+ </HLForm>

Props Changes

ghl-ui Prop	HighRise Prop	Notes
v-model	v-model:value	Changed to use value prop
size	size	New size options: 'sm', 'md', 'lg'

Examples

Basic RadioGroup

<template>
  <HLRadioGroup id="basic-group" v-model:value="selectedValue">
    <HLRadio value="1">Option 1</HLRadio>
    <HLRadio value="2">Option 2</HLRadio>
    <HLRadio value="3">Option 3</HLRadio>
  </HLRadioGroup>
</template>

<script setup>
import { ref } from 'vue'
import { HLRadioGroup, HLRadio } from '@platform-ui/highrise'

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

RadioGroup with Validation

<template>
  <HLForm :model="formModel" :rules="rules">
    <HLFormItem label="Gender" path="gender" required>
      <HLRadioGroup id="gender-group" v-model:value="formModel.gender" :status="validationStatus" :validation-message="validationMessage">
        <HLRadio value="male">Male</HLRadio>
        <HLRadio value="female">Female</HLRadio>
        <HLRadio value="other">Other</HLRadio>
      </HLRadioGroup>
    </HLFormItem>
  </HLForm>
</template>

<script setup>
import { ref, computed } from 'vue'
import { HLForm, HLFormItem, HLRadioGroup, HLRadio } from '@platform-ui/highrise'

const formModel = ref({
  gender: '',
})

const validationStatus = computed(() => {
  if (!formModel.value.gender) return 'error'
  return undefined
})

const validationMessage = computed(() => {
  if (!formModel.value.gender) return 'Please select a gender'
  return undefined
})

const rules = {
  gender: [
    {
      required: true,
      message: 'Please select a gender',
      trigger: 'change',
    },
  ],
}
</script>

RadioGroup with Custom Layout

<template>
  <HLForm :model="formModel">
    <HLFormItem label="Payment Method" path="paymentMethod">
      <div class="grid grid-cols-2 gap-4">
        <HLRadioGroup id="payment-group" v-model:value="formModel.paymentMethod">
          <HLRadio value="credit">Credit Card</HLRadio>
          <HLRadio value="debit">Debit Card</HLRadio>
          <HLRadio value="paypal">PayPal</HLRadio>
          <HLRadio value="bank">Bank Transfer</HLRadio>
        </HLRadioGroup>
      </div>
    </HLFormItem>
  </HLForm>
</template>

<script setup>
import { ref } from 'vue'
import { HLForm, HLFormItem, HLRadioGroup, HLRadio } from '@platform-ui/highrise'

const formModel = ref({
  paymentMethod: '',
})
</script>

RadioGroup with Disabled Options

<template>
  <HLForm :model="formModel">
    <HLFormItem label="Subscription" path="subscription">
      <HLRadioGroup id="subscription-group" v-model:value="formModel.subscription">
        <HLRadio value="free">Free Plan</HLRadio>
        <HLRadio value="basic">Basic Plan</HLRadio>
        <HLRadio value="premium" disabled>Premium Plan (Coming Soon)</HLRadio>
      </HLRadioGroup>
    </HLFormItem>
  </HLForm>
</template>

<script setup>
import { ref } from 'vue'
import { HLForm, HLFormItem, HLRadioGroup, HLRadio } from '@platform-ui/highrise'

const formModel = ref({
  subscription: '',
})
</script>

Best Practices

1. Always provide a unique id for accessibility
2. Use v-model:value for two-way binding
3. Implement proper form validation
4. Use appropriate size variants
5. Consider mobile responsiveness
6. Add proper ARIA labels
7. Handle loading states appropriately
8. Use descriptive labels
9. Group related options logically
10. Use consistent spacing and alignment
11. Implement proper error handling
12. Consider using tooltips for additional information
13. Handle disabled states properly
14. Use appropriate layout for different screen sizes

Additional Notes

1. The component automatically handles focus states
2. Error states are managed through validation status
3. Supports keyboard navigation
4. Maintains consistent styling with other form components
5. Handles disabled states consistently
6. Integrates seamlessly with form validation
7. Maintains accessibility standards
8. Supports custom styling through CSS variables
9. Provides clear visual feedback for all states
10. Works well on both desktop and mobile devices
11. Supports both controlled and uncontrolled modes
12. Includes built-in validation support