"use client"
import { CombinationOtp } from "@/components/keyframery/combination-otp"
export function VerifyEmail() {
return (
<CombinationOtp
verify={async (code) => {
const res = await fetch("/api/verify", { method: "POST", body: JSON.stringify({ code }) })
return res.ok
}}
onVerified={() => window.location.assign("/welcome")}
/>
)
}Installation
npx shadcn add @keyframery/combination-otp
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| verify | (code: string) => boolean | Promise<boolean> | — | Runs once every digit is in. Return true when the code is right. |
| onVerified | (code: string) => void | — | Runs once the Verified chip is showing. |
| length | number | 6 | How many digits the code has. |
| size | "sm" | "md" | "lg" | "md" | How big the slots are. |
| messages | { checking?, verified?, rejected? } | — | Your own wording. Verified sits inside a small chip, so keep that one short. |
| autoFocus | boolean | false | Focus the field when it mounts. |
| disabled | boolean | false | Stops input. |
| aria-label | string | "One-time code" | What screen readers call the field. |
Accessibility and motion
- Paste works, and so does autofill from a text message. Underneath sits input-otp, the same library shadcn's own OTP field uses.
- Screen readers get an ordinary code field and hear the result when it comes back.
- With reduced motion turned on, digits simply appear. Nothing spins, and the light jumps instead of sliding.
- The light takes its colour from --kf-accent and the check from --kf-success. Leave them unset and you get blue and green.