Migrating from ghl-ui InputOtp to HighRise InputOtp

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

Component Implementation Changes

Import Changes

- import { UIInputOtp } from '@gohighlevel/ghl-ui'
+ import { HLInputOtp } from '@platform-ui/highrise'

Basic Usage Changes

- <UIInputOtp
-   :fields="6"
-   :disabled="false"
-   placeholder="0"
-   :size="'md'"
-   :status="'default'"
-   :separatorPosition="3"
-   @onComplete="handleComplete"
-   @onChange="handleChange"
- />

+ <HLInputOtp
+   id="otp-input"
+   :fields="6"
+   :disabled="false"
+   placeholder="0"
+   size="md"
+   :separator-position="3"
+   @complete="handleComplete"
+   @change="handleChange"
+ />

Form Integration Changes

- <UIForm :model="formModel">
-   <UIFormItem label="OTP">
-     <UIInputOtp
-       :fields="6"
-       placeholder="0"
-       :size="'md'"
-       :status="'default'"
-       :separatorPosition="3"
-     />
-   </UIFormItem>
- </UIForm>

+ <HLForm :model="formModel" :rules="rules">
+   <HLFormItem
+     label="OTP"
+     path="otp"
+     required
+   >
+     <HLInputOtp
+       id="otp-input"
+       :fields="6"
+       placeholder="0"
+       size="md"
+       :separator-position="3"
+     />
+   </HLFormItem>
+ </HLForm>

Props Changes

ghl-ui Prop	HighRise Prop	Notes
v-model	v-model:value	Changed to use value prop
size	size	Enhanced size options
-	separator-position	New prop introdced for specifying the position of the separator between inputs
id	id	Required for accessibility

Examples

Basic OTP Input

<template>
  <HLInputOtp id="basic-otp" :fields="6" placeholder="0" size="md" :separator-position="3" />
</template>

<script setup>
import { ref } from 'vue'
import { HLInputOtp } from '@platform-ui/highrise'

const otpValue = ref('')
</script>

OTP Input with Validation

<template>
  <HLForm :model="formModel" :rules="rules">
    <HLFormItem label="OTP" path="otp" required>
      <HLInputOtp id="otp-input" v-model:value="formModel.otp" :fields="6" placeholder="0" size="md" :separator-position="3" />
    </HLFormItem>
  </HLForm>
</template>

<script setup>
import { ref, computed } from 'vue'
import { HLForm, HLFormItem, HLInputOtp } from '@platform-ui/highrise'

const formModel = ref({
  otp: '',
})

const validationStatus = computed(() => {
  if (!formModel.value.otp) return 'error'
  if (formModel.value.otp.length < 6) return 'warning'
  return undefined
})

const validationMessage = computed(() => {
  if (!formModel.value.otp) return 'Please enter the OTP'
  if (formModel.value.otp.length < 6) return 'Please enter all digits'
  return undefined
})

const rules = {
  otp: [
    {
      required: true,
      message: 'Please enter the OTP',
      trigger: 'change',
    },
    {
      len: 6,
      message: 'OTP must be 6 digits',
      trigger: 'change',
    },
  ],
}
</script>

OTP Input with Custom Events

<template>
  <HLInputOtp
    id="custom-otp"
    :fields="6"
    placeholder="0"
    size="md"
    :separator-position="3"
    @complete="handleComplete"
    @change="handleChange"
  />
</template>

<script setup>
import { ref } from 'vue'
import { HLInputOtp } from '@platform-ui/highrise'

const otpValue = ref('')

const handleComplete = value => {
  console.log('OTP completed:', value)
}

const handleChange = value => {
  console.log('OTP changed:', value)
}
</script>

Best Practices

1. Always provide a unique id for accessibility
2. Use v-model:value for two-way binding
3. Implement proper form validation
4. Set appropriate field count
5. Use meaningful placeholders
6. Add proper ARIA labels
7. Handle loading states appropriately
8. Use descriptive labels
9. Implement proper error handling
10. Consider using tooltips for additional information
11. Handle disabled states properly
12. Use consistent spacing and alignment
13. Consider separator positions
14. Handle input validation
15. Consider keyboard navigation
16. Implement proper error messages

Additional Notes

1. The component automatically handles focus states
2. Error states are managed through validation status
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 clear visual feedback for all states
10. Works well on both desktop and mobile devices
11. Supports both controlled and uncontrolled modes
12. Includes built-in validation support
13. Supports custom event handling
14. Handles input masking
15. Supports custom separators
16. Provides clear validation feedback
17. Supports keyboard input
18. Handles paste events