OTP Input

one-time password inputs for authentication or verification

Use the OTPInput component to present users with an input field that can be used as a one-time password. The field can be configured to visually show the number of characters as separate fields.

---
import { OTPInput } from 'webcoreui/astro'
---

<OTPInput />

<script>
    import { on } from 'webcoreui'

    on('[name="otp"]', 'input', event => console.log(e.target.value))
</script>

<script>
    import { OTPInput } from 'webcoreui/svelte'

    let value = $state('')
</script>

<OTPInput bind:value />

import React from 'react'
import { OTPInput } from 'webcoreui/react'

const Component = () => (
    <OTPInput onInput={event => console.log(event.target.value)} />
)

export default Component

You can use the OTPInput component without any props. By default, the name of the input will be set to otp. You can change this using the name prop. The component uses the Input component, meaning you can pass Input-specific props such as onChange for Svelte/React components.

Input Types

The default character length of the input is set to 6. To specify a different length for the component you can use the length prop. To introduce visually separate groups, you can also set the groupLength prop:

<OTPInput length={3} />

<OTPInput groupLength={2} />

Labels

You can also specify labels above and below the input using the label and subText props respectively:

<OTPInput
    label="One-time password"
    subText="Please enter the one-time password sent to your mobile device."
/>

API

type OTPInputProps = {
    name?: string
    disabled?: boolean
    length?: number
    groupLength?: number
    separator?: string
    label?: string
    subText?: string
    className?: string
    [key: string]: any
}