OTP Input — ARC UI

Components

OTP Input

input

interactive

<arc-otp-input>

Overview

Guidelines

When to use

Set `length` to match the expected code length from your authentication backend
Use `type="number"` for numeric-only codes to get the mobile numeric keyboard
Listen to `arc-change` and auto-submit when the value reaches the expected length
Place OTP Input in a focused, distraction-free context like a verification step
Provide a clear label or heading above the input explaining what code to enter

When not to use

Do not use OTP Input for general text entry -- it is designed specifically for short codes
Do not set `length` higher than 8 -- very long code inputs become unwieldy on mobile screens
Do not use `type="text"` when the code is purely numeric -- the wrong keyboard will appear on mobile
Do not place multiple OTP Inputs on the same page -- it creates confusion about which code to enter
Avoid removing the component from the DOM before the user has finished entering the code

Features

Row of individual character boxes with configurable `length` (default 6)
Auto-advance: focus moves to the next box on character entry
Backspace moves focus backward and clears the previous box when the current box is empty
Paste support: distributes pasted characters across boxes and advances focus
Two input modes: `number` (digits only with numeric keyboard) and `text` (any character)
Arrow key, Home, and End navigation across individual boxes
Browser autofill support via `autocomplete="one-time-code"` on each input
Fires `arc-change` with the full concatenated value on every character change

Preview

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-otp-input length="6" type="number"></arc-otp-input>

import { OtpInput } from '@arclux/arc-ui-react';

<OtpInput length={6} type="number" />

<script setup>
import { OtpInput } from '@arclux/arc-ui-vue';
</script>

<template>
  <OtpInput :length="6" type="number" />
</template>

<script>
  import { OtpInput } from '@arclux/arc-ui-svelte';
</script>

<OtpInput length={6} type="number" />

import { Component } from '@angular/core';
import { OtpInput } from '@arclux/arc-ui-angular';

@Component({
  imports: [OtpInput],
  template: `
    <OtpInput [length]="6" type="number"></OtpInput>
  `,
})
export class MyComponent {}

import { OtpInput } from '@arclux/arc-ui-solid';

<OtpInput length={6} type="number" />

import { OtpInput } from '@arclux/arc-ui-preact';

<OtpInput length={6} type="number" />

API

Prop	Type	Default	Description
`length`	`number`	`6`	Number of individual character boxes to render. Reflected as an attribute.
`value`	`string`	`''`	The concatenated value of all boxes. Reflected as an attribute and updated on every input.
`disabled`	`boolean`	`false`	Disables all input boxes, reducing opacity to 40% and blocking pointer events.
`type`	`'number' \| 'text'`	`'number'`	Input mode. `number` filters non-digits and uses the numeric keyboard; `text` allows any character.

Events

Event	Description
`arc-change`	Fired when any digit changes

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

ARC UI

Arclight