# Input OTP

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

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



<ComponentPreview name="input-otp-demo" />

## About [#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 [#installation]

<Tabs defaultValue="cli">
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add https://shadcn-cssinjs.com/r/input-otp.json
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

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

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="input-otp" title="input-otp.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</Tabs>

## Usage [#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 [#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 [#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>;
```

<ComponentPreview name="input-otp-pattern" />

## Separator [#separator]

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

<ComponentPreview name="input-otp-separator" />

## Disabled [#disabled]

Use the `disabled` prop to disable the input.

<ComponentPreview name="input-otp-disabled" />

## Controlled [#controlled]

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

<ComponentPreview name="input-otp-controlled" />

## Invalid [#invalid]

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

<ComponentPreview name="input-otp-invalid" />

## Four Digits [#four-digits]

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

<ComponentPreview name="input-otp-four-digits" />

## Alphanumeric [#alphanumeric]

Use `REGEXP_ONLY_DIGITS_AND_CHARS` to accept both letters and numbers.

<ComponentPreview name="input-otp-alphanumeric" />

## Form [#form]

<ComponentPreview name="input-otp-form" previewClassName="h-[30rem]" />

## RTL [#rtl]

To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).

<ComponentPreview name="input-otp-rtl" direction="rtl" />

## API Reference [#api-reference]

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