Chewypixel component
Code Input
One box per digit for verification codes, with a blinking caret in the next box. Pasting a code and autofill from SMS both work.
Installation
npx shadcn@latest add @chewypixel/code-inputUsage
"use client";
import { useState } from "react";
import { CodeInput } from "@/components/ui/code-input";
export function VerifyEmail() {
const [code, setCode] = useState("");
return <CodeInput value={code} onChange={setCode} onComplete={(code) => console.log(code)} aria-label="Code" />;
}Props
valueThe digits typed so far.
string
onChangeCalled with the digits on every change.
(value: string) => void
onCompleteCalled once every box is filled.
(value: string) => void
lengthHow many digits the code has.
number = 6
Released under the MIT License.
More components
- Copy ButtonAn icon button that copies text. The copy icon pops into a check, then back.
- ShimmerText with a band of light sweeping across it, for loading and thinking states.
- Status GraphicIllustrations for error pages: a wandering search icon for 404, a pulsing lock for 403 and a spinning ring for 500.
- Segmented ControlMutually exclusive options with a highlight that slides to the selected one.
See them in a real app
These components come from Mochi, our admin dashboard template built with Next.js, shadcn/ui and Motion.