Input OTP | arctis/ui

Enter one-time passwords and PINs in segmented fields with paste support. Built on input-otp.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

tsx

1import {2  InputOTP,3  InputOTPGroup,4  InputOTPSeparator,5  InputOTPSlot,6} from "@/components/ui/input-otp"78export function Example() {9  return (10    <InputOTP maxLength={6}>11      <InputOTPGroup>12        <InputOTPSlot index={0} />13        <InputOTPSlot index={1} />14        <InputOTPSlot index={2} />15      </InputOTPGroup>16      <InputOTPSeparator />17      <InputOTPGroup>18        <InputOTPSlot index={3} />19        <InputOTPSlot index={4} />20        <InputOTPSlot index={5} />21      </InputOTPGroup>22    </InputOTP>23  )24}

Installation

npx @arctis-sh/@arctis-sh/ui@latest add input-otp

Usage

1import {2  InputOTP,3  InputOTPGroup,4  InputOTPSeparator,5  InputOTPSlot,6} from "@/components/ui/input-otp"

1<InputOTP maxLength={6}>2  <InputOTPGroup>3    <InputOTPSlot index={0} />4    <InputOTPSlot index={1} />5    <InputOTPSlot index={2} />6  </InputOTPGroup>7  <InputOTPSeparator />8  <InputOTPGroup>9    <InputOTPSlot index={3} />10    <InputOTPSlot index={4} />11    <InputOTPSlot index={5} />12  </InputOTPGroup>13</InputOTP>

Composition

InputOTP
├── InputOTPGroup
│   ├── InputOTPSlot
│   ├── InputOTPSlot
│   └── InputOTPSlot
├── InputOTPSeparator
└── InputOTPGroup
    ├── InputOTPSlot
    ├── InputOTPSlot
    └── InputOTPSlot

Pattern

Use pattern with a helper from input-otp, such as REGEXP_ONLY_DIGITS.

tsx

1import { REGEXP_ONLY_DIGITS } from "input-otp"2import {3  InputOTP,4  InputOTPGroup,5  InputOTPSlot,6} from "@/components/ui/input-otp"78export function Example() {9  return (10    <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS}>11      <InputOTPGroup>12        <InputOTPSlot index={0} />13        <InputOTPSlot index={1} />14        <InputOTPSlot index={2} />15        <InputOTPSlot index={3} />16        <InputOTPSlot index={4} />17        <InputOTPSlot index={5} />18      </InputOTPGroup>19    </InputOTP>20  )21}

Separator

Place InputOTPSeparator between slot groups.

tsx

1import {2  InputOTP,3  InputOTPGroup,4  InputOTPSeparator,5  InputOTPSlot,6} from "@/components/ui/input-otp"78export function Example() {9  return (10    <InputOTP maxLength={6}>11      <InputOTPGroup>12        <InputOTPSlot index={0} />13        <InputOTPSlot index={1} />14      </InputOTPGroup>15      <InputOTPSeparator />16      <InputOTPGroup>17        <InputOTPSlot index={2} />18        <InputOTPSlot index={3} />19      </InputOTPGroup>20      <InputOTPSeparator />21      <InputOTPGroup>22        <InputOTPSlot index={4} />23        <InputOTPSlot index={5} />24      </InputOTPGroup>25    </InputOTP>26  )27}

Disabled

Set disabled to prevent input.

Verification code

tsx

1import { Label } from "@/components/ui/label"2import {3  InputOTP,4  InputOTPGroup,5  InputOTPSeparator,6  InputOTPSlot,7} from "@/components/ui/input-otp"89export function Example() {10  return (11    <div className="flex flex-col gap-2">12      <Label htmlFor="otp-disabled">Verification code</Label>13      <InputOTP id="otp-disabled" maxLength={6} disabled>14        <InputOTPGroup>15          <InputOTPSlot index={0} />16          <InputOTPSlot index={1} />17          <InputOTPSlot index={2} />18        </InputOTPGroup>19        <InputOTPSeparator />20        <InputOTPGroup>21          <InputOTPSlot index={3} />22          <InputOTPSlot index={4} />23          <InputOTPSlot index={5} />24        </InputOTPGroup>25      </InputOTP>26    </div>27  )28}

Controlled

Control the value with value and onChange.

Enter your one-time password.

tsx

1"use client"23import * as React from "react"4import { Label } from "@/components/ui/label"5import {6  InputOTP,7  InputOTPGroup,8  InputOTPSlot,9} from "@/components/ui/input-otp"1011export function Example() {12  const [value, setValue] = React.useState("")1314  return (15    <div className="flex flex-col items-center gap-2">16      <Label htmlFor="otp-controlled">Enter your one-time password.</Label>17      <InputOTP18        id="otp-controlled"19        maxLength={6}20        value={value}21        onChange={setValue}22      >23        <InputOTPGroup>24          <InputOTPSlot index={0} />25          <InputOTPSlot index={1} />26          <InputOTPSlot index={2} />27          <InputOTPSlot index={3} />28          <InputOTPSlot index={4} />29          <InputOTPSlot index={5} />30        </InputOTPGroup>31      </InputOTP>32      <div className="text-sm tracking-wide text-muted-foreground">33        {value === "" ? "Enter your one-time password." : `You entered: ${value}`}34      </div>35    </div>36  )37}

Invalid

Set aria-invalid on slots for an error state.

tsx

1"use client"23import * as React from "react"4import {5  InputOTP,6  InputOTPGroup,7  InputOTPSlot,8} from "@/components/ui/input-otp"910export function Example() {11  const [value, setValue] = React.useState("000000")1213  return (14    <InputOTP maxLength={6} value={value} onChange={setValue}>15      <InputOTPGroup>16        <InputOTPSlot index={0} aria-invalid />17        <InputOTPSlot index={1} aria-invalid />18        <InputOTPSlot index={2} aria-invalid />19        <InputOTPSlot index={3} aria-invalid />20        <InputOTPSlot index={4} aria-invalid />21        <InputOTPSlot index={5} aria-invalid />22      </InputOTPGroup>23    </InputOTP>24  )25}

Four Digits

Create a four-digit PIN field with maxLength={4} and REGEXP_ONLY_DIGITS.

tsx

1import { REGEXP_ONLY_DIGITS } from "input-otp"2import {3  InputOTP,4  InputOTPGroup,5  InputOTPSlot,6} from "@/components/ui/input-otp"78export function Example() {9  return (10    <InputOTP maxLength={4} pattern={REGEXP_ONLY_DIGITS}>11      <InputOTPGroup>12        <InputOTPSlot index={0} />13        <InputOTPSlot index={1} />14        <InputOTPSlot index={2} />15        <InputOTPSlot index={3} />16      </InputOTPGroup>17    </InputOTP>18  )19}

Alphanumeric

REGEXP_ONLY_DIGITS_AND_CHARS accepts letters and numbers. Set inputMode="text" to show the full keyboard on mobile; the library defaults to numeric.

tsx

1import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"2import {3  InputOTP,4  InputOTPGroup,5  InputOTPSlot,6} from "@/components/ui/input-otp"78export function Example() {9  return (10    <InputOTP11      maxLength={6}12      pattern={REGEXP_ONLY_DIGITS_AND_CHARS}13      inputMode="text"14    >15      <InputOTPGroup>16        <InputOTPSlot index={0} />17        <InputOTPSlot index={1} />18        <InputOTPSlot index={2} />19        <InputOTPSlot index={3} />20        <InputOTPSlot index={4} />21        <InputOTPSlot index={5} />22      </InputOTPGroup>23    </InputOTP>24  )25}

API Reference

See the input-otp documentation for the full set of root props, including maxLength, pattern, value, onChange, and onComplete.

InputOTP

Prop	Type	Default
maxLength	number	—
pattern	string	—
value	string	—
onChange	(value: string) => void	—
disabled	boolean	—
containerClassName	string	—
className	string	—

1<InputOTP maxLength={6}>2  <InputOTPGroup>3    <InputOTPSlot index={0} />4    <InputOTPSlot index={1} />5    <InputOTPSlot index={2} />6  </InputOTPGroup>7</InputOTP>

InputOTPSlot

Prop	Type	Default
index	number	—
className	string	—

Native div attributes, including aria-invalid, are supported.

1<InputOTPSlot index={0} />

InputOTPGroup

1<InputOTPGroup>2  <InputOTPSlot index={0} />3</InputOTPGroup>

InputOTPSeparator

1<InputOTPSeparator />