120k
New

Input OTP

PreviousNext

Accessible one-time password component with copy-paste functionality.

About

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

Installation

pnpm dlx shadcn@latest add @force-ui-ember/input-otp

Usage

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from '@/ui/input-otp';
<InputOTP @maxLength={{6}}>
  <InputOTPGroup>
    <InputOTPSlot @index={{0}} />
    <InputOTPSlot @index={{1}} />
    <InputOTPSlot @index={{2}} />
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    <InputOTPSlot @index={{3}} />
    <InputOTPSlot @index={{4}} />
    <InputOTPSlot @index={{5}} />
  </InputOTPGroup>
</InputOTP>

Composition

Use the following composition to build an InputOTP:

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

Pattern

Use the @pattern argument to define a custom pattern for the OTP input.

Examples

Separator

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

Disabled

Use the @disabled argument to disable the input.

Controlled

Use the @value and @onValueChange arguments to control the input value.

Invalid

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

Four Digits

A common pattern for PIN codes. This uses the @pattern argument with digits only.

Alphanumeric

Use an alphanumeric pattern to accept both letters and numbers.

Form

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

See the input-otp documentation for more information.