Migrating from ghl-ui Radio to HighRise Radio

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

Component Implementation Changes

Import Changes

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

Basic Usage Changes

- <UIRadio
-   v-model="isChecked"
-   value="option1"
- >
-   Option 1
- </UIRadio>

+ <HLRadio
+   id="option1"
+   v-model="isChecked"
+   value="option1"
+ >
+   Option 1
+ </HLRadio>

Form Integration Changes

- <UIForm :model="formModel">
-   <UIFormItem label="Options">
-     <UIRadio
-       v-model="formModel.selected"
-       value="option1"
-     >
-       Option 1
-     </UIRadio>
-   </UIFormItem>
- </UIForm>

+ <HLForm :model="formModel" :rules="rules">
+   <HLFormItem
+     label="Options"
+     path="selected"
+     required
+   >
+     <HLRadio
+       id="option1"
+       v-model="formModel.selected"
+       value="option1"
+     >
+       Option 1
+     </HLRadio>
+   </HLFormItem>
+ </HLForm>

Size Variants Changes

- <UIRadio
-   v-model="value"
-   size="large"
- >
-   Large Radio
- </UIRadio>

+ <HLRadio
+   id="radio-lg"
+   v-model="value"
+   size="lg"
+ >
+   Large Radio
+ </HLRadio>

Props Changes

ghl-ui Prop	HighRise Prop	Notes
size	'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'	Extended size options
onlyIcon	boolean	Shows only the radio button without label spacing

Size Mapping

- size="small"   → + size="sm"
- size="medium"  → + size="md"
- size="large"   → + size="lg"
+ size="xs"      // New in HighRise
+ size="2xs"     // New in HighRise
+ size="3xs"     // New in HighRise

Examples

Basic Radio

<template>
  <HLRadio id="basic-radio" v-model="isChecked" value="option1"> Option 1 </HLRadio>
</template>

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

const isChecked = ref(false)
</script>

Radio with Different Sizes

<template>
  <div class="space-y-4">
    <HLRadio id="radio-lg" v-model="value" size="lg"> Large Radio </HLRadio>
    <HLRadio id="radio-md" v-model="value" size="md"> Medium Radio </HLRadio>
    <HLRadio id="radio-sm" v-model="value" size="sm"> Small Radio </HLRadio>
  </div>
</template>

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

const value = ref(false)
</script>

Disabled Radio

<template>
  <HLRadio id="disabled-radio" v-model="isChecked" value="option1" disabled> Disabled Radio </HLRadio>
</template>

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

const isChecked = ref(false)
</script>

Best Practices

1. Always provide a unique id for accessibility
2. Use v-model 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. Implement proper error handling
10. Consider using tooltips for additional information
11. Handle disabled states properly

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