Components
Input OTP
Accessible one-time password component with copy-paste functionality.
Made by guilherme_rodz
Installation
Loading component…
When to use
Use this decision tree to determine when to use the Input OTP component:
Usage
import {
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot,
} from "@/components/redpanda-ui/input-otp"<InputOTP maxLength={6}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>Examples
Pattern
Use Base UI's validationType prop to accept an alphanumeric OTP. The default is numeric.
Loading component…
<InputOTP
maxLength={6}
validationType="alphanumeric"
>
<InputOTPGroup>
<InputOTPSlot index={0} />
{/* ... */}
</InputOTPGroup>
</InputOTP>Separator
Use InputOTPSeparator to add a separator between input groups.
Loading component…
import {
InputOTP,
InputOTPGroup,
InputOTPSeparator,
InputOTPSlot,
} from "@/components/redpanda-ui/input-otp"
...
<InputOTP maxLength={4}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
</InputOTPGroup>
</InputOTP>Controlled
You can use the value and onChange props to control the input value.
Loading component…
Credits
- We use Base UI OTP Field for the Input OTP component.
- We take our inspiration from Shadcn UI for the input OTP style.
Recent changes
- v1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested baseline while caret semantics still allow any compatible release within the same major.#133
- v1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
- v1.0.0Post-Base-UI polish. Public API unchanged.#116
- v1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
- v0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109
Built by malinskibeniamin. The source code is available on GitHub.