OTP Input

A one-time password input component for entering verification codes.

<script setup lang="ts">
import { OtpInput } from '@destyler-ui/vue'
</script>

<template>
  <OtpInput.Root>
    <OtpInput.Label>Label</OtpInput.Label>
    <OtpInput.Control>
      <OtpInput.Input v-for="id in [0, 1, 2]" :key="id" :index="id" />
    </OtpInput.Control>
    <OtpInput.HiddenInput />
  </OtpInput.Root>
</template>

import { OtpInput } from '@destyler-ui/react'

export function Basic() {
  return (
    <OtpInput.Root>
      <OtpInput.Label>Label</OtpInput.Label>
      <OtpInput.Control>
        <OtpInput.Input index={0} />
        <OtpInput.Input index={1} />
        <OtpInput.Input index={2} />
      </OtpInput.Control>
      <OtpInput.HiddenInput />
    </OtpInput.Root>
  )
}

import { OtpInput } from '@destyler-ui/solid/otp-input'
import { Index } from 'solid-js'

export function Basic() {
  return (
    <OtpInput.Root onValueComplete={e => console.warn(e.valueAsString)}>
      <OtpInput.Label>Label</OtpInput.Label>
      <OtpInput.Control>
        <Index each={[0, 1, 2]}>{id => <OtpInput.Input index={id()} />}</Index>
      </OtpInput.Control>
      <OtpInput.HiddenInput />
    </OtpInput.Root>
  )
}

<script module lang="ts">
  import type { OtpInputRootProps } from '@destyler-ui/svelte'

  export interface BasicProps extends OtpInputRootProps {}
</script>

<script lang="ts">
  import { OtpInput } from '@destyler-ui/svelte'

  const props: BasicProps = $props()
</script>

<OtpInput.Root {...props}>
  <OtpInput.Label>Label</OtpInput.Label>
  <OtpInput.Control>
    {#each [0, 1, 2] as index (index)}
      <OtpInput.Input {index} />
    {/each}
  </OtpInput.Control>
  <OtpInput.HiddenInput />
</OtpInput.Root>

Anatomy

<script setup lang="ts">
import { OtpInput } from '@destyler-ui/vue'
</script>

<template>
  <OtpInput.Root>
    <OtpInput.Label />
    <OtpInput.Control>
      <OtpInput.Input />
    </OtpInput.Control>
    <OtpInput.HiddenInput />
  </OtpInput.Root>
</template>

import { OtpInput } from '@destyler-ui/react'

export default function Basic() {
  return (
    <OtpInput.Root>
      <OtpInput.Label />
      <OtpInput.Control>
        <OtpInput.Input />
      </OtpInput.Control>
      <OtpInput.HiddenInput />
    </OtpInput.Root>
  )
}

import { OtpInput } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <OtpInput.Root>
      <OtpInput.Label />
      <OtpInput.Control>
        <OtpInput.Input index={0} />
      </OtpInput.Control>
      <OtpInput.HiddenInput />
    </OtpInput.Root>
  )
}

<script lang="ts">
  import { OtpInput } from '@destyler-ui/svelte'
</script>

<OtpInput.Root>
  <OtpInput.Label>Verification code</OtpInput.Label>
  <OtpInput.Control>
    {#each [0, 1, 2] as index (index)}
      <OtpInput.Input {index} />
    {/each}
  </OtpInput.Control>
  <OtpInput.HiddenInput />
</OtpInput.Root>

Examples

Basic

<script setup lang="ts">
import { OtpInput } from '@destyler-ui/vue'
</script>

<template>
  <OtpInput.Root>
    <OtpInput.Label>Label</OtpInput.Label>
    <OtpInput.Control>
      <OtpInput.Input v-for="id in [0, 1, 2]" :key="id" :index="id" />
    </OtpInput.Control>
    <OtpInput.HiddenInput />
  </OtpInput.Root>
</template>

import { OtpInput } from '@destyler-ui/react'

export function Basic() {
  return (
    <OtpInput.Root>
      <OtpInput.Label>Label</OtpInput.Label>
      <OtpInput.Control>
        <OtpInput.Input index={0} />
        <OtpInput.Input index={1} />
        <OtpInput.Input index={2} />
      </OtpInput.Control>
      <OtpInput.HiddenInput />
    </OtpInput.Root>
  )
}

import { OtpInput } from '@destyler-ui/solid/otp-input'
import { Index } from 'solid-js'

export function Basic() {
  return (
    <OtpInput.Root onValueComplete={e => console.warn(e.valueAsString)}>
      <OtpInput.Label>Label</OtpInput.Label>
      <OtpInput.Control>
        <Index each={[0, 1, 2]}>{id => <OtpInput.Input index={id()} />}</Index>
      </OtpInput.Control>
      <OtpInput.HiddenInput />
    </OtpInput.Root>
  )
}

<script module lang="ts">
  import type { OtpInputRootProps } from '@destyler-ui/svelte'

  export interface BasicProps extends OtpInputRootProps {}
</script>

<script lang="ts">
  import { OtpInput } from '@destyler-ui/svelte'

  const props: BasicProps = $props()
</script>

<OtpInput.Root {...props}>
  <OtpInput.Label>Label</OtpInput.Label>
  <OtpInput.Control>
    {#each [0, 1, 2] as index (index)}
      <OtpInput.Input {index} />
    {/each}
  </OtpInput.Control>
  <OtpInput.HiddenInput />
</OtpInput.Root>

Controlled

Control the OTP value programmatically.

<script setup lang="ts">
import { OtpInput } from '@destyler-ui/vue'
import { ref } from 'vue'

const value = ref(['1', '2', '3'])
</script>

<template>
  <output>{{ value.join('') }}</output>
  <OtpInput.Root v-model="value">
    <OtpInput.Label>Label</OtpInput.Label>
    <OtpInput.Control>
      <OtpInput.Input v-for="id in [0, 1, 2]" :key="id" :index="id" />
    </OtpInput.Control>
    <OtpInput.HiddenInput />
  </OtpInput.Root>
</template>

import { useState } from 'react'
import { OtpInput } from '@destyler-ui/react'

export function Controlled() {
  const [value, setValue] = useState(['1', '2', '3'])

  return (
    <>
      <output>{value.join('')}</output>
      <OtpInput.Root value={value} onValueChange={details => setValue(details.value)}>
        <OtpInput.Label>Label</OtpInput.Label>
        <OtpInput.Control>
          <OtpInput.Input index={0} />
          <OtpInput.Input index={1} />
          <OtpInput.Input index={2} />
        </OtpInput.Control>
        <OtpInput.HiddenInput />
      </OtpInput.Root>
    </>
  )
}

import { OtpInput } from '@destyler-ui/solid/otp-input'
import { createSignal, Index } from 'solid-js'

export function Controlled() {
  const [value, setValue] = createSignal(['1', '2', '3'])

  return (
    <>
      <output>{value().join('')}</output>
      <OtpInput.Root value={value()} onValueChange={details => setValue(details.value)}>
        <OtpInput.Label>Label</OtpInput.Label>
        <OtpInput.Control>
          <Index each={[0, 1, 2]}>
            {index => <OtpInput.Input index={index()} />}
          </Index>
        </OtpInput.Control>
        <OtpInput.HiddenInput />
      </OtpInput.Root>
    </>
  )
}

<script lang="ts">
  import { OtpInput } from '@destyler-ui/svelte'

  let value = $state(['1', '2', '3'])
</script>

<output>{value.join('')}</output>
<OtpInput.Root bind:value>
  <OtpInput.Label>Label</OtpInput.Label>
  <OtpInput.Control>
    {#each [0, 1, 2] as index (index)}
      <OtpInput.Input {index} />
    {/each}
  </OtpInput.Control>
  <OtpInput.HiddenInput />
</OtpInput.Root>

Customized

Customize the OTP input appearance.

<script setup lang="ts">
import { OtpInput } from '@destyler-ui/vue'
</script>

<template>
  <OtpInput.Root placeholder="*">
    <OtpInput.Label>Label</OtpInput.Label>
    <OtpInput.Control>
      <OtpInput.Input v-for="id in [0, 1, 2]" :key="id" :index="id" />
    </OtpInput.Control>
    <OtpInput.HiddenInput />
  </OtpInput.Root>
</template>

import { OtpInput } from '@destyler-ui/react'

export function Customized() {
  return (
    <OtpInput.Root placeholder="*">
      <OtpInput.Label>Label</OtpInput.Label>
      <OtpInput.Control>
        <OtpInput.Input index={0} />
        <OtpInput.Input index={1} />
        <OtpInput.Input index={2} />
      </OtpInput.Control>
      <OtpInput.HiddenInput />
    </OtpInput.Root>
  )
}

import { OtpInput } from '@destyler-ui/solid/otp-input'
import { Index } from 'solid-js'

export function Customized() {
  return (
    <OtpInput.Root placeholder="*">
      <OtpInput.Label>Label</OtpInput.Label>
      <OtpInput.Control>
        <Index each={[0, 1, 2]}>{id => <OtpInput.Input index={id()} />}</Index>
      </OtpInput.Control>
      <OtpInput.HiddenInput />
    </OtpInput.Root>
  )
}

<script lang="ts">
  import { OtpInput } from '@destyler-ui/svelte'
</script>

<OtpInput.Root placeholder="*">
  <OtpInput.Label>Label</OtpInput.Label>
  <OtpInput.Control>
    {#each [0, 1, 2] as index (index)}
      <OtpInput.Input {index} />
    {/each}
  </OtpInput.Control>
  <OtpInput.HiddenInput />
</OtpInput.Root>

Initial Value

Set an initial value for the OTP input.

<script setup lang="ts">
import { OtpInput } from '@destyler-ui/vue'
</script>

<template>
  <OtpInput.Root :default-value="['1', '2', '3']">
    <OtpInput.Label>Label</OtpInput.Label>
    <OtpInput.Control>
      <OtpInput.Input v-for="id in [0, 1, 2]" :key="id" :index="id" />
    </OtpInput.Control>
    <OtpInput.HiddenInput />
  </OtpInput.Root>
</template>

import { OtpInput } from '@destyler-ui/react'

export function InitialValue() {
  return (
    <OtpInput.Root defaultValue={['1', '2', '3']}>
      <OtpInput.Label>Label</OtpInput.Label>
      <OtpInput.Control>
        <OtpInput.Input index={0} />
        <OtpInput.Input index={1} />
        <OtpInput.Input index={2} />
      </OtpInput.Control>
      <OtpInput.HiddenInput />
    </OtpInput.Root>
  )
}

import { OtpInput } from '@destyler-ui/solid/otp-input'
import { Index } from 'solid-js'

export function InitialValue() {
  return (
    <OtpInput.Root defaultValue={['1', '2', '3']}>
      <OtpInput.Label>Label</OtpInput.Label>
      <OtpInput.Control>
        <Index each={[0, 1, 2]}>{id => <OtpInput.Input index={id()} />}</Index>
      </OtpInput.Control>
      <OtpInput.HiddenInput />
    </OtpInput.Root>
  )
}

<script lang="ts">
  import { OtpInput } from '@destyler-ui/svelte'
</script>

<OtpInput.Root defaultValue={['1', '2', '3']}>
  <OtpInput.Label>Label</OtpInput.Label>
  <OtpInput.Control>
    {#each [0, 1, 2] as index (index)}
      <OtpInput.Input {index} />
    {/each}
  </OtpInput.Control>
  <OtpInput.HiddenInput />
</OtpInput.Root>

OTP Mode

Enable OTP autocomplete mode.

<script setup lang="ts">
import { OtpInput } from '@destyler-ui/vue'
</script>

<template>
  <OtpInput.Root otp>
    <OtpInput.Label>Label</OtpInput.Label>
    <OtpInput.Control>
      <OtpInput.Input v-for="id in [0, 1, 2]" :key="id" :index="id" />
    </OtpInput.Control>
    <OtpInput.HiddenInput />
  </OtpInput.Root>
</template>

import { OtpInput } from '@destyler-ui/react'

export function OtpMode() {
  return (
    <OtpInput.Root otp>
      <OtpInput.Label>Label</OtpInput.Label>
      <OtpInput.Control>
        <OtpInput.Input index={0} />
        <OtpInput.Input index={1} />
        <OtpInput.Input index={2} />
      </OtpInput.Control>
      <OtpInput.HiddenInput />
    </OtpInput.Root>
  )
}

import { OtpInput } from '@destyler-ui/solid/otp-input'
import { Index } from 'solid-js'

export function OtpMode() {
  return (
    <OtpInput.Root otp>
      <OtpInput.Label>Label</OtpInput.Label>
      <OtpInput.Control>
        <Index each={[0, 1, 2]}>{id => <OtpInput.Input index={id()} />}</Index>
      </OtpInput.Control>
      <OtpInput.HiddenInput />
    </OtpInput.Root>
  )
}

<script lang="ts">
  import { OtpInput } from '@destyler-ui/svelte'
</script>

<OtpInput.Root otp>
  <OtpInput.Label>Label</OtpInput.Label>
  <OtpInput.Control>
    {#each [0, 1, 2] as index (index)}
      <OtpInput.Input {index} />
    {/each}
  </OtpInput.Control>
  <OtpInput.HiddenInput />
</OtpInput.Root>

Blurred

Handle the blurred state.

<script setup lang="ts">
import { OtpInput } from '@destyler-ui/vue'
</script>

<template>
  <OtpInput.Root blurOnComplete>
    <OtpInput.Label>Label</OtpInput.Label>
    <OtpInput.Control>
      <OtpInput.Input v-for="id in [0, 1, 2]" :key="id" :index="id" />
    </OtpInput.Control>
    <OtpInput.HiddenInput />
  </OtpInput.Root>
</template>

import { OtpInput } from '@destyler-ui/react'

export function Blurred() {
  return (
    <OtpInput.Root blurOnComplete>
      <OtpInput.Label>Label</OtpInput.Label>
      <OtpInput.Control>
        <OtpInput.Input index={0} />
        <OtpInput.Input index={1} />
        <OtpInput.Input index={2} />
      </OtpInput.Control>
      <OtpInput.HiddenInput />
    </OtpInput.Root>
  )
}

import { OtpInput } from '@destyler-ui/solid/otp-input'
import { Index } from 'solid-js'

export function Blurred() {
  return (
    <OtpInput.Root blurOnComplete>
      <OtpInput.Label>Label</OtpInput.Label>
      <OtpInput.Control>
        <Index each={[0, 1, 2]}>{id => <OtpInput.Input index={id()} />}</Index>
      </OtpInput.Control>
      <OtpInput.HiddenInput />
    </OtpInput.Root>
  )
}

<script lang="ts">
  import { OtpInput } from '@destyler-ui/svelte'
</script>

<OtpInput.Root blurOnComplete>
  <OtpInput.Label>Label</OtpInput.Label>
  <OtpInput.Control>
    {#each [0, 1, 2] as index (index)}
      <OtpInput.Input {index} />
    {/each}
  </OtpInput.Control>
  <OtpInput.HiddenInput />
</OtpInput.Root>

With Mask

Mask the input values for security.

<script setup lang="ts">
import { OtpInput } from '@destyler-ui/vue'
</script>

<template>
  <OtpInput.Root mask>
    <OtpInput.Label>Label</OtpInput.Label>
    <OtpInput.Control>
      <OtpInput.Input v-for="id in [0, 1, 2]" :key="id" :index="id" />
    </OtpInput.Control>
    <OtpInput.HiddenInput />
  </OtpInput.Root>
</template>

import { OtpInput } from '@destyler-ui/react'

export function WithMask() {
  return (
    <OtpInput.Root mask>
      <OtpInput.Label>Label</OtpInput.Label>
      <OtpInput.Control>
        <OtpInput.Input index={0} />
        <OtpInput.Input index={1} />
        <OtpInput.Input index={2} />
      </OtpInput.Control>
      <OtpInput.HiddenInput />
    </OtpInput.Root>
  )
}

import { OtpInput } from '@destyler-ui/solid/otp-input'
import { Index } from 'solid-js'

export function WithMask() {
  return (
    <OtpInput.Root mask>
      <OtpInput.Label>Label</OtpInput.Label>
      <OtpInput.Control>
        <Index each={[0, 1, 2]}>{id => <OtpInput.Input index={id()} />}</Index>
      </OtpInput.Control>
      <OtpInput.HiddenInput />
    </OtpInput.Root>
  )
}

<script lang="ts">
  import { OtpInput } from '@destyler-ui/svelte'
</script>

<OtpInput.Root mask>
  <OtpInput.Label>Label</OtpInput.Label>
  <OtpInput.Control>
    {#each [0, 1, 2] as index (index)}
      <OtpInput.Input {index} />
    {/each}
  </OtpInput.Control>
  <OtpInput.HiddenInput />
</OtpInput.Root>

With Field

Combine with a form field for validation and labeling.

<script setup lang="ts">
import { Field } from '@destyler-ui/vue'
import { OtpInput } from '@destyler-ui/vue'
</script>

<template>
  <Field.Root v-bind="$attrs">
    <OtpInput.Root v-bind="$attrs">
      <OtpInput.Label>Label</OtpInput.Label>
      <OtpInput.Control>
        <OtpInput.Input v-for="id in [0, 1, 2]" :key="id" :index="id" />
      </OtpInput.Control>
      <OtpInput.HiddenInput />
    </OtpInput.Root>
    <Field.HelperText>Additional Info</Field.HelperText>
    <Field.ErrorText>Error Info</Field.ErrorText>
  </Field.Root>
</template>

import { Field } from '@destyler-ui/react'
import { OtpInput } from '@destyler-ui/react'

interface WithFieldProps {
  disabled?: boolean
  readOnly?: boolean
  invalid?: boolean
}

export function WithField(props: WithFieldProps) {
  const { disabled, readOnly, invalid } = props

  return (
    <Field.Root disabled={disabled} readOnly={readOnly} invalid={invalid}>
      <OtpInput.Root>
        <OtpInput.Label>Label</OtpInput.Label>
        <OtpInput.Control>
          <OtpInput.Input index={0} />
          <OtpInput.Input index={1} />
          <OtpInput.Input index={2} />
        </OtpInput.Control>
        <OtpInput.HiddenInput />
      </OtpInput.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

import { Field } from '@destyler-ui/solid/field'
import { OtpInput } from '@destyler-ui/solid/otp-input'
import { Index } from 'solid-js'

export function WithField(props: Field.RootProps) {
  return (
    <Field.Root {...props}>
      <OtpInput.Root>
        <OtpInput.Label>Label</OtpInput.Label>
        <OtpInput.Control>
          <Index each={[0, 1, 2]}>{id => <OtpInput.Input index={id()} />}</Index>
        </OtpInput.Control>
        <OtpInput.HiddenInput />
      </OtpInput.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

<script module lang="ts">
  import type { FieldRootProps } from '@destyler-ui/svelte'

  export interface WithFieldProps extends FieldRootProps {}
</script>

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'
  import { OtpInput } from '@destyler-ui/svelte'

  const props: WithFieldProps = $props()
</script>

<Field.Root {...props}>
  <OtpInput.Root>
    <OtpInput.Label>Label</OtpInput.Label>
    <OtpInput.Control>
      {#each [0, 1, 2] as index (index)}
        <OtpInput.Input {index} />
      {/each}
    </OtpInput.Control>
    <OtpInput.HiddenInput />
  </OtpInput.Root>
  <Field.HelperText>Additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Root Provider

<script setup lang="ts">
import { OtpInput, useOtpInput } from '@destyler-ui/vue'

const pinInput = useOtpInput()
</script>

<template>
  <button @click="pinInput.focus()">Focus</button>

  <OtpInput.RootProvider :value="pinInput">
    <OtpInput.Label>Label</OtpInput.Label>
    <OtpInput.Control>
      <OtpInput.Input v-for="id in [0, 1, 2]" :key="id" :index="id" />
    </OtpInput.Control>
    <OtpInput.HiddenInput />
  </OtpInput.RootProvider>
</template>

import { OtpInput, useOtpInput } from '@destyler-ui/react'

export function RootProvider() {
  const otpInput = useOtpInput()

  return (
    <>
      <button onClick={() => otpInput.focus()}>Focus</button>

      <OtpInput.RootProvider value={otpInput}>
        <OtpInput.Label>Label</OtpInput.Label>
        <OtpInput.Control>
          <OtpInput.Input index={0} />
          <OtpInput.Input index={1} />
          <OtpInput.Input index={2} />
        </OtpInput.Control>
        <OtpInput.HiddenInput />
      </OtpInput.RootProvider>
    </>
  )
}

import { OtpInput, useOtpInput } from '@destyler-ui/solid/otp-input'
import { Index } from 'solid-js'

export function RootProvider() {
  const otpInput = useOtpInput({ onValueComplete: e => console.warn(e.valueAsString) })

  return (
    <>
      <button onClick={() => otpInput().focus()}>Focus</button>

      <OtpInput.RootProvider value={otpInput}>
        <OtpInput.Label>Label</OtpInput.Label>
        <OtpInput.Control>
          <Index each={[0, 1, 2]}>{id => <OtpInput.Input index={id()} />}</Index>
        </OtpInput.Control>
        <OtpInput.HiddenInput />
      </OtpInput.RootProvider>
    </>
  )
}

<script lang="ts">
  import { OtpInput, useOtpInput } from '@destyler-ui/svelte'

  const id = $props.id()
  const otpInput = useOtpInput({ id })
</script>

<button type="button" onclick={() => otpInput().focus()}>Focus</button>

<OtpInput.RootProvider value={otpInput}>
  <OtpInput.Label>Label</OtpInput.Label>
  <OtpInput.Control>
    {#each [0, 1, 2] as index (index)}
      <OtpInput.Input {index} />
    {/each}
  </OtpInput.Control>
  <OtpInput.HiddenInput />
</OtpInput.RootProvider>

API Reference

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`autoFocus`	—	`false \| true` Whether to auto-focus the first input.
`blurOnComplete`	—	`false \| true` Whether to blur the input when the value is complete
`defaultValue`	—	`string[]` The initial value of the otp input when it is first rendered. Use when you do not need to control the state of the otp input.
`disabled`	—	`false \| true` Whether the inputs are disabled
`form`	—	`string` The associate form of the underlying input element.
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; hiddenInput: string; label: string; control: string; input: (id: string) => string; }>` The ids of the elements in the otp input. Useful for composition.
`invalid`	—	`false \| true` Whether the otp input is in the invalid state
`mask`	—	`false \| true` If `true`, the input's value will be masked just like `type=password`
`modelValue`	—	`string[]`
`name`	—	`string` The name of the input element. Useful for form submission.
`otp`	—	`false \| true` If `true`, the otp input component signals to its fields that they should use `autocomplete="one-time-code"`.
`pattern`	—	`string` The regular expression that the user-entered input value is checked against.
`placeholder`	`"○"`	`string` The placeholder text for the input
`readOnly`	—	`false \| true` Whether the otp input is in the valid state
`required`	—	`false \| true` Whether the otp input is required
`selectOnFocus`	—	`false \| true` Whether to select input value when input is focused
`translations`	—	`otpInput.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`type`	`"numeric"`	`"numeric" \| "alphanumeric" \| "alphabetic"` The type of value the otp-input should allow

Emit	Event
`update:modelValue`	`[value: string[]]` The callback fired when the model value changes.
`valueChange`	`[details: ValueChangeDetails]` Function called on input change
`valueComplete`	`[details: ValueChangeDetails]` Function called when all inputs have valid values
`valueInvalid`	`[details: ValueInvalidDetails]` Function called when an invalid value is entered

Context

No serializable props or emits are declared for this part.

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

HiddenInput

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Input

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`blurOnComplete`	—	`false \| true` Whether to blur the input when the value is complete
`defaultValue`	—	`string[]` The initial value of the otp input when it is first rendered. Use when you do not need to control the state of the otp input
`disabled`	—	`false \| true` Whether the inputs are disabled
`form`	—	`string` The associate form of the underlying input element.
`ids`	—	`Partial<{ root: string; hiddenInput: string; label: string; control: string; input: (id: string) => string; }>` The ids of the elements in the pin input. Useful for composition.
`invalid`	—	`false \| true` Whether the pin input is in the invalid state
`mask`	—	`false \| true` If `true`, the input's value will be masked just like `type=password`
`name`	—	`string` The name of the input element. Useful for form submission.
`onValueChange`	—	`(details: otpInput.ValueChangeDetails) => void` Function called on input change
`onValueComplete`	—	`(details: otpInput.ValueChangeDetails) => void` Function called when all inputs have valid values
`onValueInvalid`	—	`(details: ValueInvalidDetails) => void` Function called when an invalid value is entered
`otp`	—	`false \| true` If `true`, the pin input component signals to its fields that they should use `autocomplete="one-time-code"`.
`pattern`	—	`string` The regular expression that the user-entered input value is checked against.
`placeholder`	`"○"`	`string` The placeholder text for the input
`readOnly`	—	`false \| true` Whether the pin input is in the valid state
`required`	—	`false \| true` Whether the pin input is required
`selectOnFocus`	—	`false \| true` Whether to select input value when input is focused
`translations`	—	`otpInput.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`type`	`"numeric"`	`"numeric" \| "alphanumeric" \| "alphabetic"` The type of value the pin-input should allow
`value`	—	`string[]` The controlled value of the pin input.

Context

Prop	Default	Type
`children*`	—	`(context: UseOtpInputContext) => ReactNode`

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

HiddenInput

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Input

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseOtpInputReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`autoFocus`	—	`false \| true` Whether to auto-focus the first input.
`blurOnComplete`	—	`false \| true` Whether to blur the input when the value is complete
`defaultValue`	—	`string[]` The initial value of the pin input when it is first rendered. Use when you do not need to control the state of the pin input
`disabled`	—	`false \| true` Whether the inputs are disabled
`form`	—	`string` The associate form of the underlying input element.
`ids`	—	`Partial<{ root: string; hiddenInput: string; label: string; control: string; input: (id: string) => string; }>` The ids of the elements in the pin input. Useful for composition.
`invalid`	—	`false \| true` Whether the pin input is in the invalid state
`mask`	—	`false \| true` If `true`, the input's value will be masked just like `type=password`
`name`	—	`string` The name of the input element. Useful for form submission.
`onValueChange`	—	`(details: ValueChangeDetails) => void` Function called on input change
`onValueComplete`	—	`(details: ValueChangeDetails) => void` Function called when all inputs have valid values
`onValueInvalid`	—	`(details: ValueInvalidDetails) => void` Function called when an invalid value is entered
`otp`	—	`false \| true` If `true`, the pin input component signals to its fields that they should use `autocomplete="one-time-code"`.
`pattern`	—	`string` The regular expression that the user-entered input value is checked against.
`placeholder`	`"○"`	`string` The placeholder text for the input
`readOnly`	—	`false \| true` Whether the pin input is in the valid state
`required`	—	`false \| true` Whether the pin input is required
`selectOnFocus`	—	`false \| true` Whether to select input value when input is focused
`translations`	—	`otpInput.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`type`	`"numeric"`	`"numeric" \| "alphanumeric" \| "alphabetic"` The type of value the pin-input should allow
`value`	—	`string[]` The controlled value of the pin input.

Context

Prop	Default	Type
`children*`	—	`(context: UseOtpInputContext) => Element`

Control

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

HiddenInput

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.InputHTMLAttributes<HTMLInputElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Input

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`(props: (userProps?: JSX.InputHTMLAttributes<HTMLInputElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.LabelHTMLAttributes<HTMLLabelElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseOtpInputReturn`
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`Snippet<[import("../../../types.js").PropsFn<"div">]>`
`autoFocus`	—	`false \| true` Whether to auto-focus the first input.
`blurOnComplete`	—	`false \| true` Whether to blur the input when the value is complete
`children`	—	`Snippet<[]> \| undefined`
`defaultValue`	—	`string[]` The initial value when it is not controlled. Prefer this over seeding with `value` for uncontrolled usage.
`disabled`	—	`false \| true` Whether the inputs are disabled
`form`	—	`string` The associate form of the underlying input element.
`id`	—	`string`
`ids`	—	`Partial<{ root: string; hiddenInput: string; label: string; control: string; input: (id: string) => string; }>` The ids of the elements in the pin input. Useful for composition.
`invalid`	—	`false \| true` Whether the pin input is in the invalid state
`mask`	—	`false \| true` If `true`, the input's value will be masked just like `type=password`
`name`	—	`string` The name of the input element. Useful for form submission.
`onValueChange`	—	`(details: import("@destyler/otp-input").ValueChangeDetails) => void` Function called on input change
`onValueComplete`	—	`(details: import("@destyler/otp-input").ValueChangeDetails) => void` Function called when all inputs have valid values
`onValueInvalid`	—	`(details: import("@destyler/otp-input").ValueInvalidDetails) => void` Function called when an invalid value is entered
`otp`	—	`false \| true` If `true`, the pin input component signals to its fields that they should use `autocomplete="one-time-code"`.
`pattern`	—	`string` The regular expression that the user-entered input value is checked against.
`placeholder`	`"○"`	`string` The placeholder text for the input
`readOnly`	—	`false \| true` Whether the pin input is in the valid state
`required`	—	`false \| true` Whether the pin input is required
`selectOnFocus`	—	`false \| true` Whether to select input value when input is focused
`translations`	—	`import("@destyler/otp-input").IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`type`	`"numeric"`	`"numeric" \| "alphanumeric" \| "alphabetic"` The type of value the pin-input should allow
`value`	—	`string[]` The controlled value of the pin input.

Context

Prop	Default	Type
`render`	—	`Snippet<[UseOtpInputContext]>`

Control

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

HiddenInput

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"input">]>`
`children`	—	`Snippet<[]> \| undefined`

Input

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"input">]>`
`children`	—	`Snippet<[]> \| undefined`

Label

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"label">]>`
`children`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`UseOtpInputReturn`
`asChild`	—	`Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`