Migrating from ghl-ui Checkbox to HighRise Checkbox

This guide migrates UICheckbox to HLCheckbox, reflecting actual props, sizes, and events.

Component Implementation Changes

Import Changes

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

Basic Usage

- <UICheckbox id="agree" v-model:checked="checked">Agree</UICheckbox>
+ <HLCheckbox id="agree" v-model:checked="checked">Agree</HLCheckbox>

Props Changes

ghl-ui Prop	HighRise Prop	Notes
id (required)	id (required)	Same
checked	checked	Same
indeterminate	indeterminate	Same
disabled	disabled	Same
size (small/medium/large, default large)	size (lg/md/sm/xs/2xs/3xs, default md)	Map large→md, medium→sm, small→xs
type (default/image)	-	Image checkbox not supported; use composition instead
src/fallbackSrc	-	Not supported; compose avatar/image alongside checkbox

Emits Changes

ghl-ui Event	HighRise Event	Notes
update:checked	update:checked	Same signature (value, event)
onSelect (image variant)	-	Not supported; handle click on composed image element

Slots Changes

ghl-ui Slot	HighRise Slot	Notes
default	default	Same for label content

Size Mapping

ghl-ui Size	HighRise Size
large	md
medium	sm
small	xs
(unset)	md

Breaking Changes

1. No image checkbox — type="image", src, fallbackSrc removed; compose image + checkbox manually.
2. Size tokens — map small/medium/large to HighRise sizes; default is md.
3. Events — only update:checked is emitted; no onSelect shortcut.

Best Practices

1. Always set id for accessibility and testing.
2. When migrating image checkboxes, wrap HLCheckbox with an image/avatar component and manage selection in parent state.
3. Keep labels concise; use the default slot for custom label content.

MCPs: map sizes large/medium/small → md/sm/xs; drop image checkbox props—compose images externally; rely on v-model:checked for state sync.