Code Slots

One-time code input where each digit lands into its slot on a spring, a rejected code drains away slot by slot, and an accepted one merges into a single wash with a check.

Default

Type or paste a six digit code. Switch the outcome in the panel to see it accepted or rejected.

0 of 6 digits entered

Customize

Accent

Ink

Slot

Digit

Danger

Length6

MaskCaret

Outcome

Slot Size44px

Gap8px

Radius12px

Bounce0.2

Settle0.3s

Rise8px

Cascade20ms

Disabled

API Reference

CodeSlots

Prop	Type	Default	Description
`length`	`number`	`6`	Number of slots.
`value`	`string`	`undefined`	Controlled code, bound with v-model:value. Digits that arrive from outside land with the cascade, digits removed drain.
`defaultValue`	`string`	`''`	Uncontrolled initial code, rendered already landed.
`status`	`'idle' \| 'error' \| 'success'`	`'idle'`	error drains the slots last to first under the danger tint and clears the code. success merges the fills into one wash and locks the input.
`mask`	`boolean`	`false`	Shows a dot instead of each digit.
`caret`	`boolean`	`true`	Shows the blinking caret in the active slot.
`disabled`	`boolean`	`false`	Fades the row and ignores input.
`autoFocus`	`boolean`	`false`	Focuses the input on mount.
`accentColor`	`string`	`'#f5f5f5'`	Fill of a landed digit, the active ring and the success wash.
`inkColor`	`string`	`'#f5f5f5'`	Caret, and the tint of the active slot.
`slotColor`	`string`	`'#27272a'`	Surface of an empty slot.
`digitColor`	`string`	`'#18181b'`	Digit colour on the fill.
`dangerColor`	`string`	`'#ff3b30'`	Ring and fill colour while status is error.
`slotSize`	`number`	`44`	Slot width in pixels. Height and digit size follow it.
`gap`	`number`	`8`	Space between slots in pixels.
`radius`	`number`	`12`	Corner radius in pixels, capped at half the slot size.
`bounce`	`number`	`0.2`	Spring overshoot of the landing fill. 0 is critically damped.
`settle`	`number`	`0.3`	Seconds a digit takes to land or drain.
`rise`	`number`	`8`	Pixels a digit rises into place. 0 fades only.
`cascade`	`number`	`20`	Milliseconds between slots when several land at once or drain on reject.
`ariaLabel`	`string`	`'One-time code'`	Accessible name of the input.

Event	Description
`change`	Emitted on every edit with the code, including the clear at the end of a reject.
`complete`	Emitted once with the code when the last hole is filled.
`update:value`	Emitted alongside change, for v-model:value.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`0-9`	Fills the active slot.
`Backspace` + `Delete`	Clears the slot, Backspace steps back when it is already empty.
`Arrow Left` + `Arrow Right`	Moves the caret between slots.
`Home` + `End`	Moves the caret to the first or the last slot.

A single visually hidden input owns the focus, accepts paste and one-time-code autofill, and is announced with its label. A live region reports how many digits are entered, or that the code was accepted.
With prefers-reduced-motion digits appear without rising and the cascade is skipped.

Call Chip Comet Dial