Migrating from ghl-ui Select to HighRise Select

This guide migrates UISelect to HLSelect, covering sizing, multiple mode, and inline options.

Component Implementation Changes

Import Changes

- import { UISelect } from '@gohighlevel/ghl-ui'
+ import { HLSelect } from '@platform-ui/highrise'

Basic Usage

- <UISelect v-model:value="value" :options="options" placeholder="Pick" />
+ <HLSelect v-model:value="value" :options="options" placeholder="Pick" />

Multiple

- <UISelect v-model:value="selected" :options="options" multiple maxTagCount={3}>
-   <template #tag="{ option }">{{ option.label }}</template>
- </UISelect>
+ <HLSelect v-model:value="selected" :options="options" multiple maxTagCount="responsive" :roundedTags="true" />

Inline Form Usage

- <UIForm :model="form"><UIFormItem label="Country"><UISelect v-model:value="form.country" /></UIFormItem></UIForm>
+ <HLForm :model="form" :rules="rules">
+   <HLFormItem label="Country" path="country" required>
+     <HLSelect id="country" v-model:value="form.country" :options="countries" placeholder="Select" />
+   </HLFormItem>
+ </HLForm>

Props Changes

| ghl-ui Prop | HighRise Prop | Notes | | --------------------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ----------- | ------ | | value / v-model:value | value / v-model:value | Same event update:value | | options | options | Same; extended option fields supported (labels, avatars, tagProps) | | filterable | filterable | Same | | multiple | multiple | Same | | size (small/medium/large) | size (lg/md/sm/xs/2xs/3xs; default from form/input group fallback sm) | Map large→md, medium→sm, small→xs | | maxTagCount (number) | maxTagCount (number or 'responsive', default 'responsive') | Responsive by default | | - | roundedTags | Rounded tag styling | | - | showAvatarInTags | Avatars in tags when options provide src/avatar props | | placeholder | placeholder | Same | | showArrow | showArrow | Same | | - | showCheckmark | Toggle checkmarks | | - | showSearchIcon | Shows search icon (default false) | | - | inline, showInlineCTA, showInlineBottomBorder | Inline editing mode helpers | | - | optionRenderer, optionHeight, tagProps, tagRenderer | Custom render hooks | | - | to | Teleport target (string | HTMLElement | false) | | - | wrapperClass, menuProps, showSavedMark, maxTagWidth, allowTagTruncation | Additional styling/behavior helpers |

Emits Changes

ghl-ui Event	HighRise Event	Notes
update:value	update:value	Same signature (value)
scroll	scroll	Same
-	search, clear, handleConfirm, handleCancel, focus, blur, update:show	Added inline/menu controls

Slots Changes

ghl-ui Slot	HighRise Alternative	Notes
tag	tagRenderer prop or default tags	Use roundedTags/tagProps instead of slot per tag
option	optionRenderer prop or renderOption utils	Prefer render functions; slots not exposed
empty	empty slot	Same

Size Mapping

ghl-ui Size	HighRise Size
large	md
medium	sm
small	xs
(unset)	sm (from form/input group)

Breaking Changes

1. Tag rendering — use roundedTags, tagProps, or tagRenderer instead of tag slot.
2. maxTagCount default — now 'responsive'; set a number to cap visible tags.
3. Size tokens — switch to HighRise sizes (mapping above).
4. Teleport — to controls dropdown mount point; defaults to body.
5. Inline mode — new inline props (inline, showInlineCTA, showInlineBottomBorder).

Best Practices

1. Set id when embedding in forms for testing/aria hooks.
2. Keep options lean; prefer label/value and use optionRenderer only when needed.
3. For multiple selects, use maxTagCount="responsive" (default) and roundedTags for compact chips.
4. Map sizes explicitly when migrating from small/medium/large.
5. Avoid heavy custom slotting; use provided render hooks for consistency.

MCPs: bind with v-model:value; map large/medium/small → md/sm/xs; rely on roundedTags/tagProps instead of tag slots; keep maxTagCount to 'responsive' unless product requires hard cap.