Migrating from ghl-ui Input to HighRise Input

This guide migrates UIInput to HLInput with accurate bindings, sizes, and inline features.

Component Implementation Changes

Import Changes

- import { UIInput, UIInputGroup, UIInputGroupLabel } from '@gohighlevel/ghl-ui'
+ import { HLInput, HLInputGroup, HLInputGroupLabel, HLFormItem } from '@platform-ui/highrise'

Basic Usage Changes

- <UIInput id="my-input" v-model="value" placeholder="Enter text" />
+ <HLInput id="my-input" v-model:modelValue="value" placeholder="Enter text" />

Form Integration

- <UIForm :model="formModel">
-   <UIFormItem label="Username">
-     <UIInput id="username" v-model="username" />
-   </UIFormItem>
- </UIForm>
+ <HLForm :model="formModel" :rules="rules">
+   <HLFormItem label="Username" path="username" required>
+     <HLInput id="username" v-model:modelValue="username" />
+   </HLFormItem>
+ </HLForm>

Prefix / Suffix Icons

- <UIInput :modelValue="email" @update:modelValue="handle" >
-   <template #prefix><MailIcon class="w-5 h-5" /></template>
- </UIInput>
+ <HLInput :modelValue="email" @update:modelValue="handle" :prefix-icon="MailIcon" />
+ <!-- or slots -->
+ <HLInput :modelValue="email" @update:modelValue="handle">
+   <template #prefix><MailIcon class="w-3" /></template>
+ </HLInput>

Password

- <UIInput type="password" showPasswordOn="click" v-model="password" />
+ <HLInput type="password" showPasswordOn="click" v-model:modelValue="password" />

Props Changes

ghl-ui Prop	HighRise Prop	Notes
id (required)	id (required)	Same
modelValue	modelValue	Use v-model:modelValue; event update:modelValue
type (text/textarea/password + extended)	type (text/textarea/password; extended tel/email/url)	Same support
size (small/medium/large, default large)	size (lg/md/sm/xs/2xs/3xs; default sm via fallback)	Map large→md, medium→sm, small→xs
clearable	clearable	Default false
loading	loading	Default undefined
autosize	autosize	Boolean or { minRows, maxRows }
showPasswordOn	showPasswordOn	Default click
-	inline, showInlineCTA, showInlineBottomBorder	Inline editing helpers (default CTA off, bottom border on)
inputProps	inputProps	Forwarded to input/textarea
-	prefixIcon, suffixIcon, suffixIconTooltipContent	Icon props in addition to slots
-	textAlign, fontSize, fontWeight	Style helpers

Emits Changes

ghl-ui Event	HighRise Event	Notes
update:modelValue	update:modelValue	Same signature (value)
onBlur / onChange	blur, change, focus, keydown, confirm, cancel, onBlur	HL adds more lifecycle events; blur emitted on confirm/cancel paths too

Slots Changes

ghl-ui Slot	HighRise Slot	Notes
prefix	prefix	Same
suffix	suffix	Same
password-visible-icon	-	Not exposed; use default icons
password-invisible-icon	-	Not exposed; use default icons
default (textarea)	default	Same

Size Mapping

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

Breaking Changes

1. v-model syntax — use v-model:modelValue or bind modelValue + @update:modelValue.
2. Size tokens — switch small/medium/large to HighRise sizes (see mapping; default is sm).
3. Password icons — no custom password icon slots; use built-in icons.
4. Inline mode — inline/showInlineCTA/showInlineBottomBorder are new; not present in ghl-ui.

Best Practices

1. Always set id for accessibility/testing.
2. Prefer v-model:modelValue for clarity; emit handlers only when you need side effects.
3. Map sizes explicitly when migrating from UI defaults (large → md).
4. Use prefixIcon/suffixIcon props for simple icons; slots for custom markup.
5. For inline editing, pair inline with showInlineCTA only when you need explicit confirm/cancel.

MCPs: bind with v-model:modelValue; map large/medium/small → md/sm/xs; avoid custom password icon slots—use built-in icons; set id for deterministic hooks.