Docs
Components
Input OTP

Input OTP

Accessible one-time password component with copy paste functionality.

Preview

Code

Simple

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Digits Only

With Separator

With Spacing

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/input-otp

Anatomy

Single import

Multiple imports

import { Label } from "~/components/ui/label";
import { RadioGroup } from "~/components/ui/radio-group";

<RadioGroup.Root>
  <RadioGroup.Item>
    <RadioGroup.Indicator />
    <Label />
  </RadioGroup.Item>
</RadioGroup.Root>;