Build an N-box OTP input with auto-advance, backspace and paste.
01
01
Understand the problem
ReactPasteBackspace
02
02
Attempt it yourself
Sketch your approach before reading the solution — that's what interviews test.
Stuck? AI Nudge Available
Get a conceptual hint to guide your logic without spoiling the final implementation.
03
03
Study the solution
Solve in
The solution is waiting
Give it an honest attempt first — then compare your thinking with the full walkthrough.
04
04
React solution
Complete solutionRun Playground
import { useState } from 'react';
import OtpInput from './src/OtpInput';
export default function App() {
const [code, setCode] = useState('');
const [done, setDone] = useState(false);
return (
<div style={{ fontFamily: 'system-ui, sans-serif', padding: 32, textAlign: 'center' }}>
<h2 style={{ marginBottom: 6 }}>Verify your number</h2>
<p style={{ color: '#666', marginTop: 0, marginBottom: 20 }}>
Enter the 6-digit code. Try typing, pasting "123456", and backspace.
</p>
<div style={{ display: 'inline-block' }}>
<OtpInput length={6}
onChange={(v) => { setCode(v); setDone(false); }}
onComplete={(v) => { setCode(v); setDone(true); }} />
</div>
<p style={{ marginTop: 22, fontFamily: 'monospace', fontSize: 16 }}>
value: {code || '(empty)'} {done ? 'OK' : ''}
</p>
</div>
);
}05
05
Join the discussion
Discussion (0)
Sign in to join the discussion.
No responses yet. Be the first to share what you think.