Migrating from ghl-ui CheckboxGroup to HighRise CheckboxGroup

HLCheckboxGroup is a replacement for UICheckboxGroup with HighRise styling. IDs are optional, sizing tokens follow HighRise common sizes, and validation is handled by HLFormItem (no built-in status or validation-message props).

Component Implementation Changes

Import Changes

- import { UICheckboxGroup, UICheckbox } from '@gohighlevel/ghl-ui'
+ import { HLCheckboxGroup, HLCheckbox } from '@platform-ui/highrise'

Basic Usage Changes

- <UICheckboxGroup v-model:value="selectedValues">
-   <UICheckbox value="1">Option 1</UICheckbox>
-   <UICheckbox value="2">Option 2</UICheckbox>
- </UICheckboxGroup>
+ <HLCheckboxGroup v-model:value="selectedValues">
+   <HLCheckbox value="1">Option 1</HLCheckbox>
+   <HLCheckbox value="2">Option 2</HLCheckbox>
+ </HLCheckboxGroup>

Props Changes

ghl-ui Prop	HighRise Prop	Notes
v-model	v-model:value	Same binding; default value is [].
size	size	Uses HighRise common sizes (3xs–lg); default inherits form size or md.
direction	direction	horizontal (default) or vertical.
disabled	disabled	Disables the whole group; you can still disable individual HLCheckbox items.
id	id (optional)	Provide when you need a stable DOM id.
label, status, validation-message	—	Not provided on the group. Use HLFormItem for labels/validation.

Examples

Basic CheckboxGroup

<template>
  <HLCheckboxGroup v-model:value="selectedValues">
    <HLCheckbox value="1">Option 1</HLCheckbox>
    <HLCheckbox value="2">Option 2</HLCheckbox>
    <HLCheckbox value="3">Option 3</HLCheckbox>
  </HLCheckboxGroup>
</template>

<script setup>
import { ref } from 'vue'

const selectedValues = ref<string[]>([])
</script>

Vertical Layout with Disabled Items

<template>
  <HLCheckboxGroup v-model:value="preferences" direction="vertical">
    <HLCheckbox value="email">Email</HLCheckbox>
    <HLCheckbox value="sms" disabled>SMS</HLCheckbox>
    <HLCheckbox value="push">Push</HLCheckbox>
  </HLCheckboxGroup>
</template>

<script setup>
import { ref } from 'vue'

const preferences = ref<string[]>([])
</script>

Inside a Form Item

<template>
  <HLForm :model="formModel" :rules="rules">
    <HLFormItem label="Notifications" path="notifications" required>
      <HLCheckboxGroup v-model:value="formModel.notifications">
        <HLCheckbox value="email">Email</HLCheckbox>
        <HLCheckbox value="sms">SMS</HLCheckbox>
        <HLCheckbox value="push">Push</HLCheckbox>
      </HLCheckboxGroup>
    </HLFormItem>
  </HLForm>
</template>

<script setup>
import { reactive } from 'vue'

const formModel = reactive({ notifications: [] as string[] })
const rules = {
  notifications: [{ required: true, message: 'Choose at least one', trigger: 'change' }],
}
</script>