Input OTP

Component for OTP Input.

Default

One-time password input

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

One-time password input

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

One-time password input

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

One-time password input

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

One-time password input

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>

Accessibility

• Describe the OTP request via aria-label / aria-labelledby on the container (e.g., “Enter the 6-digit code”).
• Give each cell an aria-label that announces its index (“Digit 2 of 6”) or hook helper text through aria-describedby.
• Announce expired or incorrect codes inside an aria-live="assertive" region near the group.

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