InputOTP

A one-time password input component for verification codes and secure authentication

Usage

1import { InputOTP } from '@lenso/ui';

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { InputOTP, Label, Link, TextField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { Slots, styles } from "./parts";6export function Basic() {7  return (8    <TextField name="code" xstyle={styles.field}>9      <div {...stylex.props(styles.heading)}>10        <Label>Verify account</Label>11        <p {...stylex.props(styles.muted)}>We&apos;ve sent a code to a****@gmail.com</p>12      </div>13      <InputOTP length={6} name="code">14        <Slots />15      </InputOTP>16      <div {...stylex.props(styles.resend)}>17        <p {...stylex.props(styles.muted)}>Didn&apos;t receive a code?</p>18        <Link xstyle={styles.link} href="#">19          Resend20        </Link>21      </div>22    </TextField>23  );24}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Anatomy

1import { InputOTP } from '@lenso/ui';2
3export default () => (4  <InputOTP maxLength={6}>5    <InputOTP.Group>6      <InputOTP.Slot index={0} />7      <InputOTP.Slot index={1} />8      {/* ...rest of the slots */}9    </InputOTP.Group>10    <InputOTP.Separator />11    <InputOTP.Group>12      <InputOTP.Slot index={3} />13      {/* ...rest of the slots */}14    </InputOTP.Group>15  </InputOTP>16)

InputOTP is built on top of input-otp by @guilherme_rodz, providing a flexible and accessible foundation for OTP input components.

Examples

Variants

The InputOTP component supports two visual variants:

primary (default) - Standard styling with shadow, suitable for most use cases
secondary - Lower emphasis variant without shadow, suitable for use in Surface components

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { InputOTP, Label, TextField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { Slots, styles } from "./parts";6export function Variants() {7  return (8    <div {...stylex.props(styles.variants)}>9      {(["primary", "secondary"] as const).map((variant) => (10        <TextField key={variant} name={`${variant}-code`} xstyle={styles.field}>11          <Label>{variant === "primary" ? "Primary variant" : "Secondary variant"}</Label>12          <InputOTP length={6} name={`${variant}-code`} variant={variant}>13            <Slots />14          </InputOTP>15        </TextField>16      ))}17    </div>18  );19}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

In Surface

When used inside a Surface component, use variant="secondary" to apply the lower emphasis variant suitable for surface backgrounds.

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { InputOTP, Label, Link, Surface, TextField } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { Slots, styles } from "./parts";6export function OnSurface() {7  return (8    <Surface xstyle={styles.surface}>9      <TextField name="code">10        <div {...stylex.props(styles.heading)}>11          <Label>Verify account</Label>12          <p {...stylex.props(styles.muted)}>We&apos;ve sent a code to a****@gmail.com</p>13        </div>14        <InputOTP length={6} name="code" variant="secondary">15          <Slots />16        </InputOTP>17        <div {...stylex.props(styles.resend)}>18          <p {...stylex.props(styles.muted)}>Didn&apos;t receive a code?</p>19          <Link xstyle={styles.link} href="#">20            Resend21          </Link>22        </div>23      </TextField>24    </Surface>25  );26}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Disabled State

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Description, InputOTP, Label, TextField } from "@lenso/ui";4import { Slots, styles } from "./parts";5export function Disabled() {6  return (7    <TextField disabled name="code" xstyle={styles.field}>8      <Label>Verify account</Label>9      <Description>Code verification is currently disabled</Description>10      <InputOTP disabled length={6} name="code">11        <Slots />12      </InputOTP>13    </TextField>14  );15}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Four Digits

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { InputOTP, Label, TextField } from "@lenso/ui";4import { styles } from "./parts";5export function FourDigits() {6  return (7    <TextField name="pin" xstyle={styles.field}>8      <Label>Enter PIN</Label>9      <InputOTP length={4} name="pin">10        <InputOTP.Group>11          <InputOTP.Slot aria-label="Digit 1" />12          <InputOTP.Slot aria-label="Digit 2" />13          <InputOTP.Slot aria-label="Digit 3" />14          <InputOTP.Slot aria-label="Digit 4" />15        </InputOTP.Group>16      </InputOTP>17    </TextField>18  );19}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Controlled

Control the value to synchronize with state, clear the input, or implement custom validation.

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Description, InputOTP, Label, TextField } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { Slots, styles } from "./parts";7export function Controlled() {8  const [value, setValue] = useState("");9  return (10    <TextField name="code" xstyle={styles.field}>11      <Label>Verify account</Label>12      <InputOTP length={6} name="code" value={value} onValueChange={setValue}>13        <Slots />14      </InputOTP>15      <Description>16        {value.length > 0 ? (17          <>18            Value: {value} ({value.length}/6) •{" "}19            <button type="button" {...stylex.props(styles.clear)} onClick={() => setValue("")}>20              Clear21            </button>22          </>23        ) : (24          "Enter a 6-digit code"25        )}26      </Description>27    </TextField>28  );29}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

On Complete

Use the onComplete callback to trigger actions when all slots are filled.

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Button, Form, InputOTP, Label, Spinner, TextField } from "@lenso/ui";4import { useState, type FormEvent } from "react";5import { Slots, styles } from "./parts";6export function OnComplete() {7  const [value, setValue] = useState("");8  const [isComplete, setIsComplete] = useState(false);9  const [isSubmitting, setIsSubmitting] = useState(false);10  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {11    event.preventDefault();12    if (!isComplete || isSubmitting) return;13    setIsSubmitting(true);14    setTimeout(() => {15      setIsSubmitting(false);16      setValue("");17      setIsComplete(false);18    }, 2000);19  };20  return (21    <Form xstyle={styles.field} onSubmit={handleSubmit}>22      <TextField name="code">23        <Label>Verify account</Label>24        <InputOTP25          length={6}26          name="code"27          value={value}28          onValueComplete={(code) => {29            setIsComplete(true);30            console.log("Code complete:", code);31          }}32          onValueChange={(next) => {33            setValue(next);34            setIsComplete(false);35          }}36        >37          <Slots />38        </InputOTP>39      </TextField>40      <Button41        xstyle={styles.submit}42        disabled={!isComplete}43        isLoading={isSubmitting}44        type="submit"45        variant="primary"46      >47        {isSubmitting ? (48          <>49            <Spinner color="current" size="sm" />50            Verifying...51          </>52        ) : (53          "Verify Code"54        )}55      </Button>56    </Form>57  );58}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Form Example

A complete two-factor authentication form with validation and submission.

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import {4  Button,5  Description,6  FieldError,7  Form,8  InputOTP,9  Label,10  Link,11  Spinner,12  TextField,13} from "@lenso/ui";14import { useState, type FormEvent } from "react";15import * as stylex from "@stylexjs/stylex";16import { Slots, styles } from "./parts";17export function FormExample() {18  const [value, setValue] = useState("");19  const [error, setError] = useState("");20  const [isSubmitting, setIsSubmitting] = useState(false);21  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {22    event.preventDefault();23    if (isSubmitting) return;24    setError("");25    if (value.length !== 6) {26      setError("Please enter all 6 digits");27      return;28    }29    setIsSubmitting(true);30    setTimeout(() => {31      if (value === "123456") {32        console.log("Code verified successfully!");33        setValue("");34      } else setError("Invalid code. Please try again.");35      setIsSubmitting(false);36    }, 1500);37  };38  return (39    <Form xstyle={styles.form} onSubmit={handleSubmit}>40      <TextField name="code" invalid={!!error}>41        <Label>Two-factor authentication</Label>42        <Description>Enter the 6-digit code from your authenticator app</Description>43        <InputOTP44          length={6}45          name="code"46          value={value}47          onValueChange={(next) => {48            setValue(next);49            setError("");50          }}51        >52          <Slots />53        </InputOTP>54        {error && <FieldError match>{error}</FieldError>}55      </TextField>56      <Button57        xstyle={styles.full}58        disabled={value.length !== 6}59        isLoading={isSubmitting}60        type="submit"61        variant="primary"62      >63        {isSubmitting ? (64          <>65            <Spinner color="current" size="sm" />66            Verifying...67          </>68        ) : (69          "Verify"70        )}71      </Button>72      <div {...stylex.props(styles.help)}>73        <p {...stylex.props(styles.muted)}>Having trouble?</p>74        <Link xstyle={styles.link} href="#">75          Use backup code76        </Link>77      </div>78    </Form>79  );80}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

With Pattern

Use the pattern prop to restrict input to specific characters. HeroUI exports common patterns like REGEXP_ONLY_CHARS and REGEXP_ONLY_DIGITS.

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Description, InputOTP, Label, TextField } from "@lenso/ui";4import { Slots, styles } from "./parts";5export function WithPattern() {6  return (7    <TextField name="code" xstyle={styles.field}>8      <Label>Enter code (letters only)</Label>9      <Description>Only alphabetic characters are allowed</Description>10      <InputOTP length={6} name="code" validationType="alpha">11        <Slots />12      </InputOTP>13    </TextField>14  );15}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

With Validation

Use isInvalid together with validation messages to surface errors.

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { Button, Description, FieldError, Form, InputOTP, Label, TextField } from "@lenso/ui";4import { useState, type FormEvent } from "react";5import { Slots, styles } from "./parts";6export function WithValidation() {7  const [value, setValue] = useState("");8  const [isInvalid, setIsInvalid] = useState(false);9  const onSubmit = (event: FormEvent<HTMLFormElement>) => {10    event.preventDefault();11    const code = new FormData(event.currentTarget).get("code");12    if (code !== "123456") {13      setIsInvalid(true);14      return;15    }16    setIsInvalid(false);17    setValue("");18    alert("Code verified successfully!");19  };20  return (21    <Form xstyle={styles.field} onSubmit={onSubmit}>22      <TextField name="code" invalid={isInvalid}>23        <Label>Verify account</Label>24        <Description>Hint: The code is 123456</Description>25        <InputOTP26          length={6}27          name="code"28          value={value}29          onValueChange={(next) => {30            setValue(next);31            setIsInvalid(false);32          }}33        >34          <Slots />35        </InputOTP>36        {isInvalid && <FieldError match>Invalid code. Please try again.</FieldError>}37      </TextField>38      <Button disabled={value.length !== 6} type="submit">39        Submit40      </Button>41    </Form>42  );43}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Customization

Tailwind CSS

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.3import { InputOTP, Label, Link, TextField } from "@lenso/ui";4import { Slots, styles } from "./parts";5export function CustomStyles() {6  return (7    <TextField name="code" xstyle={[styles.field, styles.customWidth]}>8      <Label>Verify account</Label>9      <InputOTP length={6} name="code">10        <Slots custom />11      </InputOTP>12      <Link xstyle={styles.resendLink} href="#">13        Resend code14      </Link>15    </TextField>16  );17}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Global CSS

To customize the InputOTP component classes, you can use the @layer components directive. Learn more.

1@layer components {2  .input-otp {3    @apply gap-3;4  }5
6  .input-otp__slot {7    @apply size-12 rounded-xl border-2 font-bold;8  }9
10  .input-otp__slot[data-active="true"] {11    @apply border-accent-500 ring-2 ring-accent-200;12  }13
14  .input-otp__separator {15    @apply w-2 h-1 bg-border-strong rounded-full;16  }17}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The InputOTP component uses these CSS classes (View source styles):

Base Classes [!toc]

.input-otp - Base container
.input-otp__container - Inner container from input-otp library
.input-otp__group - Group of slots
.input-otp__slot - Individual input slot
.input-otp__slot-value - The character inside a slot
.input-otp__caret - Blinking caret indicator
.input-otp__separator - Visual separator between groups

State Classes [!toc]

.input-otp__slot[data-active="true"] - Currently active slot
.input-otp__slot[data-filled="true"] - Slot with a character
.input-otp__slot[data-disabled="true"] - Disabled slot
.input-otp__slot[data-invalid="true"] - Invalid slot
.input-otp__container[data-disabled="true"] - Disabled container

Interactive States

The component supports both CSS pseudo-classes and data attributes for flexibility:

Hover: :hover or [data-hovered="true"] on slot
Active: [data-active="true"] on slot (currently focused)
Filled: [data-filled="true"] on slot (contains a character)
Disabled: [data-disabled="true"] on container and slots
Invalid: [data-invalid="true"] on slots

API Reference

InputOTP

InputOTP is built on top of the input-otp library with additional features.

Base Props

Prop	Type	Default	Description
`maxLength`	`number`	-	Required. Number of input slots.
`value`	`string`	-	Controlled value (uncontrolled if not provided).
`onChange`	`(value: string) => void`	-	Handler called when the value changes.
`onComplete`	`(value: string) => void`	-	Handler called when all slots are filled.
`className`	`string`	-	Additional CSS classes for the container.
`containerClassName`	`string`	-	CSS classes for the inner container.
`variant`	`"primary" \| "secondary"`	`"primary"`	Visual variant of the component. `primary` is the default style with shadow. `secondary` is a lower emphasis variant without shadow, suitable for use in surfaces.
`children`	`React.ReactNode`	-	InputOTP.Group, InputOTP.Slot, and InputOTP.Separator components.

Validation Props

Prop	Type	Default	Description
`isDisabled`	`boolean`	`false`	Whether the input is disabled.
`isInvalid`	`boolean`	`false`	Whether the input is in an invalid state.
`validationErrors`	`string[]`	-	Server-side or custom validation errors.
`validationDetails`	`ValidityState`	-	HTML5 validation details.

Input Props

Prop	Type	Default	Description
`pattern`	`string`	-	Regex pattern for allowed characters (e.g., `REGEXP_ONLY_DIGITS`).
`textAlign`	`'left' \| 'center' \| 'right'`	`'left'`	Text alignment within slots.
`inputMode`	`'numeric' \| 'text' \| 'decimal' \| 'tel' \| 'search' \| 'email' \| 'url'`	`'numeric'`	Virtual keyboard type on mobile devices.
`placeholder`	`string`	-	Placeholder text for empty slots.
`pasteTransformer`	`(text: string) => string`	-	Transform pasted text (e.g., remove hyphens).

Form Props

Prop	Type	Default	Description
`name`	`string`	-	Name attribute for form submission.
`autoFocus`	`boolean`	-	Whether to focus the first slot on mount.

InputOTP.Group

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the group.
`children`	`React.ReactNode`	-	InputOTP.Slot components.

InputOTP.Slot

Prop	Type	Default	Description
`index`	`number`	-	Required. Zero-based index of the slot.
`className`	`string`	-	Additional CSS classes for the slot.

InputOTP.Separator

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes for the separator.

Exported Patterns

HeroUI re-exports common regex patterns from input-otp for convenience:

1import { REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS_AND_CHARS } from '@lenso/ui';2
3// Use with pattern prop4<InputOTP pattern={REGEXP_ONLY_DIGITS} maxLength={6}>5  {/* ... */}6</InputOTP>

REGEXP_ONLY_DIGITS - Only numeric characters (0-9)
REGEXP_ONLY_CHARS - Only alphabetic characters (a-z, A-Z)
REGEXP_ONLY_DIGITS_AND_CHARS - Alphanumeric characters (0-9, a-z, A-Z)

Input

Primitive single-line text input component that accepts standard HTML attributes

Form

Wrapper component for form validation and submission handling

Surface

Container component that provides surface-level styling and context for child components

InputOTP

Usage

Anatomy

Examples

Variants

In Surface

Disabled State

Four Digits

Controlled

On Complete

Form Example

With Pattern

With Validation

Customization

Tailwind CSS

Global CSS

Styling Reference

CSS Classes

Base Classes [!toc]

State Classes [!toc]

Interactive States

API Reference

InputOTP

Base Props

Validation Props

Input Props

Form Props

InputOTP.Group

InputOTP.Slot

InputOTP.Separator

Exported Patterns

Related Components