Migrating from ghl-ui RadioGroupItem to HighRise RadioCard

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

Component Implementation Changes

Import Changes

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

Basic Usage Changes

- <UIRadioGroup
-   v-model:value="selectedValue"
- >
-   <UIRadioGroupItem
-     value="1"
-     title="Basic Plan"
-     description="Perfect for small businesses"
-     icon="star"
-     @change="handleChange"
-   >
-     <template #icon><LayersTwo02Icon class="w-8 h-8" /></template>
-   </UIRadioGroupItem>
-   <UIRadioGroupItem
-     value="2"
-     title="Pro Plan"
-     description="Ideal for growing businesses"
-     icon="star-fill"
-     @change="handleChange"
-   >
-     <template #icon><LayersTwo02Icon class="w-8 h-8" /></template>
-   </UIRadioGroupItem>
- </UIRadioGroup>

+ <HLRadioGroup
+   id="plan-group"
+   :value="selectedValue"
+   :radioCardGroup="true"
+ >
+   <HLRadioCard
+     value="1"
+     title="Basic Plan"
+     description="Perfect for small businesses"
+     icon="star"
+     @change="handleChange"
+   >
+     <template #icon><LayersTwo02Icon /></template>
+   </HLRadioCard>
+   <HLRadioCard
+     value="2"
+     title="Pro Plan"
+     description="Ideal for growing businesses"
+     icon="star-fill"
+     @change="handleChange"
+   >
+     <template #icon><LayersTwo02Icon /></template>
+   </HLRadioCard>
+ </HLRadioGroup>

Form Integration Changes

- <UIForm :model="formModel">
-   <UIFormItem label="Select Plan">
-     <UIRadioGroup
-       v-model:value="formModel.plan"
-     >
-       <UIRadioGroupItem
-         value="basic"
-         title="Basic Plan"
-         description="Perfect for small businesses"
-         icon="star"
-       >
-         <template #icon><LayersTwo02Icon /></template>
-       </UIRadioGroupItem>
-       <UIRadioGroupItem
-         value="pro"
-         title="Pro Plan"
-         description="Ideal for growing businesses"
-         icon="star-fill"
-       >
-         <template #icon><LayersTwo02Icon /></template>
-       </UIRadioGroupItem>
-     </UIRadioGroup>
-   </UIFormItem>
- </UIForm>

+ <HLForm :model="formModel" :rules="rules">
+   <HLFormItem
+     label="Select Plan"
+     path="plan"
+     required
+   >
+     <HLRadioGroup
+       id="plan-group"
+       v-model:value="formModel.plan"
+     >
+       <HLRadioCard
+         value="basic"
+         title="Basic Plan"
+         description="Perfect for small businesses"
+         icon="star"
+         @change="handleChange"
+       >
+         <template #icon><LayersTwo02Icon /></template>
+       </HLRadioCard>
+       <HLRadioCard
+         value="pro"
+         title="Pro Plan"
+         description="Ideal for growing businesses"
+         icon="star-fill"
+         @change="handleChange"
+       >
+         <template #icon><LayersTwo02Icon /></template>
+       </HLRadioCard>
+     </HLRadioGroup>
+   </HLFormItem>
+ </HLForm>

Props Changes

ghl-ui Prop	HighRise Prop	Notes
size	size	New size options: 'sm', 'md', 'lg'

Examples

Basic RadioCard Group

<template>
  <HLRadioGroup id="plan-group" v-model:value="selectedValue">
    <HLRadioCard value="basic" title="Basic Plan" description="Perfect for small businesses" icon="star" />
    <HLRadioCard value="pro" title="Pro Plan" description="Ideal for growing businesses" icon="star-fill" />
  </HLRadioGroup>
</template>

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

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

RadioCard with Validation

<template>
  <HLForm :model="formModel" :rules="rules">
    <HLFormItem label="Select Plan" path="plan" required>
      <HLRadioGroup id="plan-group" v-model:value="formModel.plan" :status="validationStatus" :validation-message="validationMessage">
        <HLRadioCard value="basic" title="Basic Plan" description="Perfect for small businesses" icon="star" />
        <HLRadioCard value="pro" title="Pro Plan" description="Ideal for growing businesses" icon="star-fill" />
      </HLRadioGroup>
    </HLFormItem>
  </HLForm>
</template>

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

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

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

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

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

RadioCard with Custom Layout

<template>
  <HLForm :model="formModel">
    <HLFormItem label="Select Plan" path="plan">
      <div class="grid grid-cols-2 gap-4">
        <HLRadioGroup id="plan-group" v-model:value="formModel.plan">
          <HLRadioCard value="basic" title="Basic Plan" description="Perfect for small businesses" icon="star" />
          <HLRadioCard value="pro" title="Pro Plan" description="Ideal for growing businesses" icon="star-fill" />
        </HLRadioGroup>
      </div>
    </HLFormItem>
  </HLForm>
</template>

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

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

RadioCard with Disabled Options

<template>
  <HLForm :model="formModel">
    <HLFormItem label="Select Plan" path="plan">
      <HLRadioGroup id="plan-group" v-model:value="formModel.plan">
        <HLRadioCard value="basic" title="Basic Plan" description="Perfect for small businesses" icon="star" />
        <HLRadioCard value="pro" title="Pro Plan" description="Ideal for growing businesses" icon="star-fill" />
        <HLRadioCard value="enterprise" title="Enterprise Plan" description="For large organizations" icon="star-fill" disabled />
      </HLRadioGroup>
    </HLFormItem>
  </HLForm>
</template>

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

const formModel = ref({
  plan: '',
})
</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 titles and descriptions
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
15. Choose meaningful icons that represent the options

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
13. Enhanced visual presentation with icons and descriptions
14. Better user experience for complex selection scenarios