InputOTP
Collects one-time passcodes and verification codes.
See it and copy it
Framework example
Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.
Paste the full code, or move through digits with Arrow Left / Arrow Right.
View InputOTP code
Framework usage
Switch targets to compare the adapter code. This live preview runs the Astro example. React and Elements use their own behavior APIs; complete the matching framework setup before copying an example.---
import {
Field,
InputOTP,
Kbd,
Label
} from '@santi020k/lumen-astro'
---
<Field>
<Label for="ex-otp">Verification code</Label>
<InputOTP
aria-describedby="ex-otp-hint"
id="ex-otp"
length={8}
name="code"
value="12345678"
required
/>
<p id="ex-otp-hint">Paste the full code, or move through digits with <Kbd>Arrow Left</Kbd> / <Kbd>Arrow Right</Kbd>.</p>
</Field>import {
Field,
InputOTP,
Kbd,
Label
} from '@santi020k/lumen-react'
export const Example = () => (
<>
<Field>
<Label htmlFor="ex-otp">Verification code</Label>
<InputOTP
aria-describedby="ex-otp-hint"
id="ex-otp"
length={8}
name="code"
defaultValue="12345678"
required
/>
<p id="ex-otp-hint">Paste the full code, or move through digits with <Kbd>Arrow Left</Kbd> / <Kbd>Arrow Right</Kbd>.</p>
</Field>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-field>
<lumen-label for="ex-otp">Verification code</lumen-label>
<lumen-input-otp
aria-describedby="ex-otp-hint"
id="ex-otp"
length="8"
name="code"
value="12345678"
required></lumen-input-otp>
<p id="ex-otp-hint">Paste the full code, or move through digits with <lumen-kbd>Arrow Left</lumen-kbd> / <lumen-kbd>Arrow Right</lumen-kbd>.</p>
</lumen-field>Framework differences
React: The onPaste clipboard handler can call preventDefault to cancel Lumen paste handling. Otherwise sanitized paste invokes onChange and onValueChange once, including controlled and form-controller values.
Choose your target
Add this component
Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astrolumen add InputOTPlumen add InputOTPpnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add InputOTP --target reactlumen add InputOTP --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add InputOTP --target elementslumen add InputOTP --target elementsAPI reference
Lumen-specific props and runtime attributes for the Astro primitive. Use the framework differences above and the copyable examples for React composition and Elements attributes; the public adapter types define their supported contracts.
| Attribute | Values | Default | Description |
|---|---|---|---|
| autocomplete | HTML autocomplete value | "one-time-code" | Hints that password managers and mobile keyboards can offer one-time code autofill. |
| disabled | boolean | false | Disables the native input and generated visual segments. |
| length | number | 6 | Sets the number of visual code segments and the default maxlength. |
| maxlength | number | length | Overrides the native maximum character count. |
| inputmode | HTML inputmode value | "numeric" | Hints the preferred on-screen keyboard. |
| pattern | string | "[0-9]*" | Sets the native input pattern for accepted characters. |
| class, className | string | "" | Merges custom classes with the generated ui-* root classes. |
| ...native attributes | HTML attributes | - | Forwards standard attributes to the root element unless the component consumes them. |
Keyboard interactions
Keyboard behavior provided by the Astro UIPrimitives runtime for this component.
| Key | Action |
|---|---|
| ArrowLeft, ArrowRight | Move the native input selection one position left or right and sync the visible segments. |
| Home, End | Move the native input selection to the start or end of the current value and sync the visible segments. |