Github
Docs
OTP Field

OTP Field

An accessible and customizable OTP Input component.

Docs API Reference
Separator

Installation

npx shadcn-solid@latest add otp-field

Usage

import {
  OTPField,
  OTPFieldGroup,
  OTPFieldInput,
  OTPFieldSeparator,
  OTPFieldSlot
} from "@/components/ui/otp-field";
<OTPField maxLength={6}>
  <OTPFieldInput />
  <OTPFieldGroup>
    <OTPFieldSlot index={0} />
    <OTPFieldSlot index={1} />
    <OTPFieldSlot index={2} />
  </OTPFieldGroup>
  <OTPFieldSeparator />
  <OTPFieldGroup>
    <OTPFieldSlot index={3} />
    <OTPFieldSlot index={4} />
    <OTPFieldSlot index={5} />
  </OTPFieldGroup>
</OTPField>

Exmaples

Pattern

Use the pattern prop to define a custom pattern for the OTP field.

Controlled

You can use the value and onValueChange props to control the input value.

Enter your one-time password.
ImagePagination