Input OTP
Accessible one-time password component with copy paste functionality.
Installation
npx shadcn@latest add https://spoke.georgedrury.co.uk/r/input-otpLineage
Anatomy
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
} from "@/components/ui/input-otp"
export default () => (
<InputOTP>
<InputOTPGroup>
<InputOTPSlot index={0} />
</InputOTPGroup>
</InputOTP>
)Spoke utility classes
| Class | Fallback chain | Description |
|---|---|---|
--input-otp-radius | var(--input-radius, var(--radius-md)) | Border radius for otp |
--input-otp-border | var(--input-border, var(--input)) | Border colour for otp input variant |
--input-otp-background | var(--input-background, transparent) | Background colour for otp input variant |
--shadow-input-otp | var(--input-shadow, var(--shadow-xs)) | Box shadow for input otp |