InputOTP

Component for OTP .

Default

Vue

<template>
  <HLInputOtp @onComplete="onCompleteHandler" @onChange="onChangeHandler" />
</template>

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

  const otpValue = ref('')
  const onChangeHandler = (value: string) => {
    // do something
  }
  const onCompleteHandler = (value: { otp: string; state: 'completed' }) => {
    otpValue.value = value.otp
  }
</script>

Fileds

Vue

<template>
  <HLInputOtp size="sm" :fields="4" @onComplete="onCompleteHandler" @onChange="onChangeHandler" />
</template>

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

  const otpValue = ref('')
  const onChangeHandler = (value: string) => {
    // do something
  }
  const onCompleteHandler = (value: { otp: string; state: 'completed' }) => {
    otpValue.value = value.otp
  }
</script>

Seperator Position

Vue

<template>
  <HLInputOtp size="sm" :fields="6" :separatorPosition="3" @onComplete="onCompleteHandler" @onChange="onChangeHandler" />
</template>

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

  const otpValue = ref('')
  const onChangeHandler = (value: string) => {
    // do something
  }
  const onCompleteHandler = (value: { otp: string; state: 'completed' }) => {
    otpValue.value = value.otp
  }
</script>

Custom Placeholder

Vue

<template>
  <HLInputOtp size="sm" :fields="4" placeholder="#" @onComplete="onCompleteHandler" @onChange="onChangeHandler" />
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { HLInputOtp } from '@platform-ui/highrise'

  const otpValue = ref('')
  const onChangeHandler = (value: string) => {
    // do something
  }
  const onCompleteHandler = (value: { otp: string; state: 'completed' }) => {
    otpValue.value = value.otp
  }
</script>

Disabled

Vue

<template>
  <HLInputOtp size="sm" :fields="4" disabled @onComplete="onCompleteHandler" @onChange="onChangeHandler" />
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { HLInputOtp } from '@platform-ui/highrise'

  const otpValue = ref('')
  const onChangeHandler = (value: string) => {
    // do something
  }
  const onCompleteHandler = (value: { otp: string; state: 'completed' }) => {
    otpValue.value = value.otp
  }
</script>

Imports

import { HLInputOtp } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id *	string | undefined	undefined	The id of the element
fields	number	4	Number of fields to display
disabled	boolean	false	Disables the otp
placeholder	string	'0'	Placeholder text for the otp
size	'3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg'	'md'	Size of the otp
separatorPosition	number | undefined	undefined	Position of the separator

Emits

Name	Type	Description
@onComplete	function	Callback function for when the otp is completed
@onChange	function	Callback function for when the otp is changed