Code Input

A segmented input for fixed-length codes — OTPs, licence keys, activation codes. Visually renders individual character boxes while using a single hidden <input> underneath for accessibility and native paste support.

A 6-digit one-time password field. onComplete fires as soon as the last box is filled. Paste a 6-digit string to fill all boxes at once.

Pass layout as an array to create groups. separator renders between each group.

Pass a function to characterSet for full control. This example accepts only hex characters and renders a live colour preview.

The [3, 3, 3] layout contains nine boxes: three read-only ABC prefix boxes and six editable digits. Separators are visual only; value contains only the six editable digits.

compact and small props reduce the size of the input. Mutually exclusive.