Input OTP

Accessible one-time password component with copy paste functionality.

@react.component
let make = () => {
  <InputOtp maxLength={6} defaultValue="123456">

About

Input OTP is built on top of input-otp by @guilherme_rodz.

Installation

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/InputOtp
Copy

Usage

Copy<InputOtp maxLength={6}>
  <InputOtp.Group>
    <InputOtp.Slot index={0} />
    <InputOtp.Slot index={1} />
    <InputOtp.Slot index={2} />
  </InputOtp.Group>
  <InputOtp.Separator />
  <InputOtp.Group>
    <InputOtp.Slot index={3} />
    <InputOtp.Slot index={4} />
    <InputOtp.Slot index={5} />
  </InputOtp.Group>
</InputOtp>

Pattern

Use the pattern prop to define a custom pattern for the OTP input.

Copy;<InputOTP maxLength={6} pattern={InputOtp.regexpOnlyDigitsAndChars}>
  ...
</InputOTP>

@react.component
let make = () =>
  <Field className="w-fit">

Examples

Separator

Use the <InputOTPSeparator /> component to add a separator between input groups.

@react.component
let make = () =>
  <InputOtp maxLength={6}>

Disabled

Use the disabled prop to disable the input.

@react.component
let make = () =>
  <InputOtp id="disabled" maxLength={6} disabled={true} value="123456">

Controlled

Use the value and onChange props to control the input value.

@@directive("'use client'")

@react.component

Invalid

Use aria-invalid on the slots to show an error state.

@@directive("'use client'")

@react.component

Four Digits

A common pattern for PIN codes. This uses the pattern={REGEXP_ONLY_DIGITS} prop.

@react.component
let make = () =>
  <InputOtp maxLength={4} pattern={InputOtp.regexpOnlyDigits}>

Alphanumeric

Use REGEXP_ONLY_DIGITS_AND_CHARS to accept both letters and numbers.

@react.component
let make = () =>
  <InputOtp maxLength={6} pattern={InputOtp.regexpOnlyDigitsAndChars}>

Form

@react.component
let make = () =>
  <Card className="mx-auto max-w-md">

API Reference

See the input-otp documentation for more information.