Migrating from ghl-ui Input to HighRise Input

This guide will help you migrate from the ghl-ui Input text component to the new HighRise Input text component.

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="inputValue"
-   :modelValue="inputValue"
-   placeholder="Enter text"
- />

+ <HLInput
+   id="my-input"
+   v-model:modelValue="inputValue"
+   placeholder="Enter text"
+   size="md"
+ />

- <UIInput
-   id="my-input"
-   :modelValue="inputValue"
-   @update:modelValue="handleValueChange"
-   placeholder="Enter text"
- />

+ <HLInput
+   id="my-input"
+   :modelValue="inputValue"
+   @update:modelValue="handleValueChange"
+   placeholder="Enter text"
+   size="md"
+ />

INFO

• when :modelValue is used, @update:modelValue is needed.
• when v-model:modelValue is used, @update:modelValue is not needed.

Important Size Migration Note:

• If the original UIInput has no size prop specified (using default size), always set size="md" on the new HLInput
• If the original UIInput has a specific size prop, refer to the Size Mapping section below for the correct mapping

Form Integration Changes

- <UIForm :model="formModel">
-   <UIFormItem label="Username">
-     <UIInput
-       id="username"
-       v-model="username"
-       placeholder="Enter your username"
-     />
-   </UIFormItem>
- </UIForm>

+ <HLForm :model="formModel" :rules="rules">
+   <HLFormItem
+     label="Username"
+     path="username"
+     required
+   >
+     <HLInput
+       id="username"
+       v-model:modelValue="username"
+       placeholder="Enter your username"
+       size="md"
+     />
+   </HLFormItem>
+ </HLForm>

Input Group Changes

- <UIInputGroup>
-   <UIInputGroupLabel>https://</UIInputGroupLabel>
-   <UIInput
-     id="website"
-     v-model="website"
-   />
-   <UIInputGroupLabel>.com</UIInputGroupLabel>
- </UIInputGroup>

+ <HLInputGroup>
+   <HLInputGroupLabel>https://</HLInputGroupLabel>
+   <HLInput
+     id="website"
+     v-model:modelValue="website"
+     size="md"
+   />
+   <HLInputGroupLabel>.com</HLInputGroupLabel>
+ </HLInputGroup>

Input with prefix icon

- <UIInput :modelValue="website" @update:modelValue="handleValueChange">
-   <template #prefix>
-     <UserIcon class="w-5 h-5" />
-   </template>
- </UIInput>

+ <HLInput
+   :prefix-icon="UserIcon"
+   size="md"
+   :modelValue="website"
+   @update:modelValue="handleValueChange"
+ />

// Or using slots
+ <HLInput size="md" :modelValue="website" @update:modelValue="handleValueChange">
+   <template #prefix>
+     <UserIcon class="w-3" />
+   </template>
+ </HLInput>

Input with suffix icon

- <UIInput :modelValue="website" @update:modelValue="handleValueChange">
-   <template #suffix>
-     <UserIcon class="w-5 h-5" />
-   </template>
- </UIInput>

+ <HLInput
+   :suffix-icon="UserIcon"
+   size="md"
+   :modelValue="website"
+   @update:modelValue="handleValueChange"
+ />

// Or using slots
+ <HLInput size="md" :modelValue="website" @update:modelValue="handleValueChange">
+   <template #suffix>
+     <UserIcon class="w-3" />
+   </template>
+ </HLInput>

Password Input

- <UIInput
-   :modelValue="password"
-   @update:modelValue="handlePasswordChange"
-   type="password"
-   showPasswordOn="click"
- >
-   <template #password-visible-icon>
-     <EyeIcon class="w-5 h-5" />
-   </template>
-   <template #password-invisible-icon>
-     <EyeOffIcon class="w-5 h-5" />
-   </template>
- </UIInput>

+ <HLInput
+   :modelValue="password"
+   @update:modelValue="handlePasswordChange"
+   type="password"
+   showPasswordOn="click"
+   size="md"
+ />

Props Changes

ghl-ui Prop	HighRise Prop	Notes
modelValue	modelValue	Use v-model:modelValue instead of v-model
size	size	Values changed (see below)

Type Changes

- type="text"      // Supported
+ type="text"      // Supported

- type="textarea"  // Supported
+ type="textarea"  // Supported

- type="password"  // Supported
+ type="password"  // Supported

- type="tel"       // Supported
+ type="tel"       // Supported

- type="email"     // Supported
+ type="email"     // Supported

- type="url"       // Supported
+ type="url"       // Supported

Size Mapping

- size="tiny"     → + size="3xs"
- size="small"   → + size="2xs"
- size="medium"  → + size="sm"
- size="large"   → + size="md"
+ size="xs"      // New in HighRise
+ size="2xs"     // New in HighRise
+ size="3xs"     // New in HighRise

New Features in HighRise

Text Alignment

<template>
  <HLInput v-model:modelValue="value" text-align="start" />
  <HLInput v-model:modelValue="value" text-align="center" />
  <HLInput v-model:modelValue="value" text-align="end" />
</template>

Inline Editing

<template>
  <HLInput v-model:modelValue="value" inline :showInlineCTA="true" :showInlineBottomBorder="false" placeholder="Click to edit..." />
</template>

Icon with Tooltip

<template>
  <HLInput v-model:modelValue="value" :suffix-icon="HelpCircleIcon" suffix-icon-tooltip-content="Help text here" />
</template>

Character Count and Limit

<template>
  <!-- Basic character count -->
  <HLInput v-model:modelValue="value" showCount />

  <!-- With character limit -->
  <HLInput v-model:modelValue="value" :maxlength="10" showCount />
</template>

Payment Input Example

<template>
  <HLInput v-model:modelValue="value">
    <template #prefix>
      <div class="flex items-center" :style="{ width: '40px', height: '40px' }">
        <img
          src="https://download.logo.wine/logo/Mastercard/Mastercard-Logo.wine.png"
          alt="credit card"
          class="w-full h-full object-contain"
        />
      </div>
    </template>
  </HLInput>
</template>

Best Practices

1. Always provide unique id props for accessibility
2. Use v-model:modelValue for two-way binding
3. Implement proper form validation when needed
4. Use appropriate size variants for different contexts
5. Consider mobile responsiveness
6. Add proper ARIA labels for accessibility
7. Handle loading and error states appropriately
8. Use descriptive placeholders
9. Group related inputs using HLInputGroup
10. Maintain consistent styling with other form components
11. Use character count and limits for text inputs when appropriate
12. Consider using inline editing for better UX in certain contexts
13. Utilize tooltips for additional context or help text
14. Implement proper validation feedback

Additional Notes

1. The component automatically handles focus states
2. Error states are managed through form validation
3. Supports keyboard navigation
4. Maintains consistent styling with other form components
5. Handles disabled states consistently
6. Integrates seamlessly with form validation
7. Maintains accessibility standards
8. Supports custom styling through CSS variables
9. Provides built-in support for character counting and limiting
10. Offers flexible icon integration options
11. Supports inline editing mode for better UX
12. Includes tooltip support for additional context