Migrating from ghl-ui Switch to HighRise Toggle

HighRise HLToggle replaces UISwitch with optional labels, generated IDs, and variant styling. Validation is handled by surrounding form items; there are no status/validation-message props on the toggle itself.

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 v-model:value="isEnabled" label="Enable notifications" />

Props Changes

ghl-ui Prop	HighRise Prop	Notes
checkedValue / uncheckedValue	checked-value / unchecked-value	Same semantics; defaults remain true / false
defaultValue	default-value	Same
value / v-model:value	value / v-model:value	Same
disabled	disabled	Same
loading	loading	Same
rubberBand	–	Not supported; built-in transitions are used
size (small, medium, large)	size (xs, sm, md, lg, xl)	Defaults to md (aligns with other inputs)
id (required)	id (optional)	Auto-generated when omitted
ariaLabel	label + aria-label via $attrs	Provide label or pass aria-label in attrs
–	label	Optional text label rendered with HLText
–	variant	default or error border emphasis

Events

ghl-ui Event	HighRise Event	Notes
update:value	update:value	Same semantics
–	label:click	Fires when label is clicked

Examples

Basic Toggle

<template>
  <HLToggle 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>

Error Variant with Custom Values

<template>
  <HLToggle v-model:value="status" checked-value="on" unchecked-value="off" variant="error" label="Require admin approval" />
</template>

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

const status = ref('off')
</script>

Sizes

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

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

const value = ref(true)
</script>

Best Practices

1. Use label for accessibility; when omitting it, provide aria-label via $attrs.
2. Bind with v-model:value and rely on checked-value/unchecked-value for non-boolean states.
3. Choose variant="error" to surface validation state from the parent form item.
4. Disable toggles during async updates to prevent conflicting states.
5. Keep size consistent with nearby inputs (sm/md in most forms).