Skip to content
UI

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

Section titled “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

Section titled “Examples”

Basic

Section titled “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>

Customized

Section titled “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

Section titled “Initial Value”

Set an initial value for the OTP input.

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

<template>
  <OtpInput.Root :model-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 value={['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

Section titled “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

Section titled “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

Section titled “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

Section titled “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

Section titled “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

Section titled “API Reference”

Root

PropDefaultType
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

EmitEvent
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

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

HiddenInput

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Input

PropDefaultType
index*—number
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Label

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

PropDefaultType
value*—MachineApi<PropTypes>
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Root

PropDefaultType
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 value of the the pin input.

Context

PropDefaultType
children*—(context: UseOtpInputContext) => ReactNode

Control

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

HiddenInput

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Input

PropDefaultType
index*—number
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Label

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

PropDefaultType
value*—UseOtpInputReturn
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Root

PropDefaultType
asChild—(props: (userProps?: solid_js85.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 value of the the pin input.

Context

PropDefaultType
children*—(context: UseOtpInputContext) => Element

Control

PropDefaultType
asChild—(props: (userProps?: solid_js85.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

PropDefaultType
asChild—(props: (userProps?: solid_js85.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

PropDefaultType
index*—number
asChild—(props: (userProps?: solid_js85.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

PropDefaultType
asChild—(props: (userProps?: solid_js85.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

PropDefaultType
value*—UseOtpInputReturn
asChild—(props: (userProps?: solid_js85.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

PropDefaultType
asChild—Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").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[]
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("/home/runner/work/ui/ui/packages/svelte/dist/index").OtpInputValueChangeDetails) => void

Function called on input change

onValueComplete—(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").OtpInputValueChangeDetails) => void

Function called when all inputs have valid values

onValueInvalid—(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").OtpInputValueInvalidDetails) => 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—IntlTranslations | undefined

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 value of the the pin input.

Context

PropDefaultType
render—Snippet<[UseOtpInputContext]>

Control

PropDefaultType
asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children—Snippet<[]> | undefined

HiddenInput

PropDefaultType
asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"input">]>
children—Snippet<[]> | undefined

Input

PropDefaultType
index*—number
asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"input">]>
children—Snippet<[]> | undefined

Label

PropDefaultType
asChild—import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"label">]>
children—Snippet<[]> | undefined

RootProvider

PropDefaultType
value*—UseOtpInputReturn
asChild—Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children—Snippet<[]> | undefined