Migrating from ghl-ui Switch to HighRise Toggle

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

Component Implementation Changes

Import Changes

- import { UISwitch } from '@gohighlevel/ghl-ui'
+ import { HLToggle } from '@platform-ui/highrise'

Basic Usage Changes

- <UISwitch
-   v-model:value="isEnabled"
-   label="Enable notifications"
- />

+ <HLToggle
+   id="notifications-toggle"
+   v-model:value="isEnabled"
+   label="Enable notifications"
+ />

Form Integration Changes

- <UIForm :model="formModel">
-   <UIFormItem label="Settings">
-     <UISwitch
-       v-model:value="formModel.notifications"
-       label="Enable notifications"
-     />
-   </UIFormItem>
- </UIForm>

+ <HLForm :model="formModel" :rules="rules">
+   <HLFormItem
+     label="Settings"
+     path="notifications"
+     required
+   >
+     <HLToggle
+       id="notifications-toggle"
+       v-model:value="formModel.notifications"
+       label="Enable notifications"
+     />
+   </HLFormItem>
+ </HLForm>

Props Changes

ghl-ui Prop	HighRise Prop	Notes
size	size	New size options: 'sm', 'md', 'lg'
status	status	New prop for validation status
validation-message	validation-message	New prop for validation feedback

Examples

Basic Toggle

<template>
  <HLToggle id="basic-toggle" v-model:value="isEnabled" label="Enable feature" />
</template>

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

const isEnabled = ref(false)
</script>

Toggle with Validation

<template>
  <HLForm :model="formModel" :rules="rules">
    <HLFormItem label="Settings" path="notifications" required>
      <HLToggle
        id="notifications-toggle"
        v-model:value="formModel.notifications"
        label="Enable notifications"
        :status="validationStatus"
        :validation-message="validationMessage"
      />
    </HLFormItem>
  </HLForm>
</template>

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

const formModel = ref({
  notifications: false,
})

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

const validationMessage = computed(() => {
  if (!formModel.value.notifications) return 'Please enable notifications'
  return undefined
})

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

Toggle with Different Sizes

<template>
  <div class="space-y-4">
    <HLToggle id="toggle-lg" v-model:value="value" size="lg" label="Large Toggle" />
    <HLToggle id="toggle-md" v-model:value="value" size="md" label="Medium Toggle" />
    <HLToggle id="toggle-sm" v-model:value="value" size="sm" label="Small Toggle" />
  </div>
</template>

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

const value = ref(false)
</script>

Disabled Toggle

<template>
  <HLToggle id="disabled-toggle" v-model:value="isEnabled" label="Disabled Toggle" disabled />
</template>

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

const isEnabled = ref(false)
</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. Implement proper error handling
10. Consider using tooltips for additional information
11. Handle disabled states properly
12. Use consistent spacing and alignment

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