Input OTP

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeInputOtpExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeInputOtpExample/></NativeScope>}

Controlled value

The value is a single string, not an array of characters. Pass value + onChange to control it, or defaultValue to leave it uncontrolled. onComplete fires the moment the last box fills, which is usually where you submit.

'use client';
import '@helios-ui/react/styles.css';
import {useState} from 'react';
import {NativeScope,NativeInputOtp} from '@helios-ui/react';
export function Example(){
const[code,setCode]=useState('');const[complete,setComplete]=useState('');
return <NativeScope><div><NativeInputOtp value={code}onChange={setCode}onComplete={setComplete}/><output>{complete?"Completed local code "+complete:"Enter all six digits"}</output></div></NativeScope>;
}

Length, grouping and states

length sets the number of boxes and groupEvery splits them into runs, which makes a long code easier to read back. isInvalid gives the boxes a red edge over the same tint a failed Input uses.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="input-otp" id="options"/>}

Paste and autofill

Pasting into any box distributes the digits from that point onward rather than dropping everything but the first character. The same path handles OS autofill: iOS and Chrome deliver the whole code into a single box, so each box carries autoComplete="one-time-code" and accepts more than one character. Non-digits are stripped throughout, and the boxes use inputMode="numeric" so phones show a number pad without the spinners and stray characters a number input would bring.