Code input

A one-time code field drawn as slots: digits spring into place as you type or paste, and the slots flash when the code is complete.

enhancer
input
otp
code
form
verification
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Code input example

Enter the 6-digit code we sent you

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<label class="demo-card">Enter the 6-digit code we sent you <input data-motion="code-input" inputmode="numeric" autocomplete="one-time-code" maxlength="6" value="48"></label>

import { CodeInput } from "./motion/react/CodeInput";

<CodeInput>Your content</CodeInput>

<script setup lang="ts">
import CodeInput from "./motion/vue/CodeInput.vue";
</script>

<template>
  <CodeInput>Your content</CodeInput>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "code-input";

The wrappers: CodeInput.tsx (React, TypeScript) and CodeInput.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-slots`	`6`	how many characters (the input's maxlength wins)

- The real input stays on top of the slots (invisible), so its label, paste, the phone's code autofill (autocomplete="one-time-code"), the form value and what screen readers read are the input's own. The slots are a picture of its value, hidden from screen readers. - Only letters and digits are kept (digits only with inputmode="numeric"), cut to the length; a complete event carries the code when the last slot fills. - The slot that takes the next character shows a ring while the field has focus. - Reduced motion drops the spring and the blink of the caret stays the only change. Reduced motion shows every state at once, with no movement, and stops anything that would move on its own. Frame loops and CSS animations pause off screen and in hidden tabs. Only transform, opacity and paint animate, so nothing around it moves.

Size

code-input.js is 1.4 KB gzip, with components-kit.js 3.9 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.