Stalk UI

Component

OtpInput

Collects a one-time passcode across discrete, auto-advancing slots.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/otp-input

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<OtpInput maxLength={6} aria-label="One-time passcode">
  <OtpInput.Group>
    <OtpInput.Slot index={0} />
    <OtpInput.Slot index={1} />
    <OtpInput.Slot index={2} />
  </OtpInput.Group>
  <OtpInput.Separator />
  <OtpInput.Group>
    <OtpInput.Slot index={3} />
    <OtpInput.Slot index={4} />
    <OtpInput.Slot index={5} />
  </OtpInput.Group>
</OtpInput>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`size``OtpInputSize`No-Cell size.
`children``ReactNode`Yes-The slot groups to render (see \`OtpInput.Group\` / \`OtpInput.Slot\`).
PropTypeRequiredDefaultDescription
`index``number`Yes-Index of the underlying input character this cell renders.

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`size``sm`, `md`, `lg`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/otp-input.json`
  • Recipe: `otpInput`
  • Files: `src/components/ui/otp-input.tsx`