# Input OTP · JGuang UI

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

- Page: https://jiguang132.com/systems/jguang-ui/docs/components/base/input-otp
- Based on: shadcn/ui documentation (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c

> Example `input-otp-demo`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input-otp


## About

Input OTP is built on top of [input-otp](https://github.com/guilhermerodz/input-otp) by [@guilherme_rodz](https://twitter.com/guilherme_rodz).

## Installation


  

**Command**


  

**Manual**


```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```


### Install the following dependencies:


```bash
npm install input-otp
```


### Copy and paste the following code into your project.


[View complete source: components/ui/input-otp.tsx](/r/jguang-ui/base/input-otp.json)


### Update the import paths to match your project setup.


## Usage

```tsx showLineNumbers
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp"
```

```tsx showLineNumbers
<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`:

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

## Pattern

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

```tsx showLineNumbers {1,5}
import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"

;<InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
  ...
</InputOTP>
```


> Example `input-otp-pattern`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input-otp


## Separator

Use the `` component to add a separator between input groups.


> Example `input-otp-separator`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input-otp


## Disabled

Use the `disabled` prop to disable the input.


> Example `input-otp-disabled`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input-otp


## Controlled

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


> Example `input-otp-controlled`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input-otp


## Invalid

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


> Example `input-otp-invalid`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input-otp


## Four Digits

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


> Example `input-otp-four-digits`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input-otp


## Alphanumeric

Use `REGEXP_ONLY_DIGITS_AND_CHARS` to accept both letters and numbers.


> Example `input-otp-alphanumeric`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input-otp


## Form


> Example `input-otp-form`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input-otp


## RTL

To enable RTL support in JGuang UI, see the [RTL configuration guide](/systems/jguang-ui/docs/rtl).


> Example `input-otp-rtl`: interactive preview on https://jiguang132.com/systems/jguang-ui/docs/components/base/input-otp


## API Reference

See the [input-otp](https://input-otp.rodz.dev) documentation for more information.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt