# InputOTP

One-time password input with individual character slots

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@databricks/appkit-ui/react"

export default function InputOtpExample() {
  return (
    <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>
  )
}

```

## InputOTP[​](#inputotp-1 "Direct link to InputOTP")

One-time password input with individual character slots

**Source:** [`packages/appkit-ui/src/react/ui/input-otp.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-otp.tsx)

### Props[​](#props "Direct link to Props")

| Prop                          | Type                              | Required | Default | Description |
| ----------------------------- | --------------------------------- | -------- | ------- | ----------- |
| `value`                       | `string`                          |          | -       | -           |
| `onChange`                    | `((newValue: string) => unknown)` |          | -       | -           |
| `maxLength`                   | `number`                          | ✓        | -       | -           |
| `textAlign`                   | `enum`                            |          | -       | -           |
| `onComplete`                  | `((...args: any[]) => unknown)`   |          | -       | -           |
| `pushPasswordManagerStrategy` | `enum`                            |          | -       | -           |
| `pasteTransformer`            | `((pasted: string) => string)`    |          | -       | -           |
| `containerClassName`          | `string`                          |          | -       | -           |
| `noScriptCSSFallback`         | `string \| null`                  |          | -       | -           |
| `render`                      | `InputOTPRenderFn`                |          | -       | -           |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { InputOTP } from '@databricks/appkit-ui';

<InputOTP /* props */ />

```

## InputOTPGroup[​](#inputotpgroup "Direct link to InputOTPGroup")

Container grouping OTP input slots together

**Source:** [`packages/appkit-ui/src/react/ui/input-otp.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-otp.tsx)

### Props[​](#props-1 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-1 "Direct link to Usage")

```tsx
import { InputOTPGroup } from '@databricks/appkit-ui';

<InputOTPGroup /* props */ />

```

## InputOTPSeparator[​](#inputotpseparator "Direct link to InputOTPSeparator")

Visual separator between OTP slot groups

**Source:** [`packages/appkit-ui/src/react/ui/input-otp.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-otp.tsx)

### Props[​](#props-2 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-2 "Direct link to Usage")

```tsx
import { InputOTPSeparator } from '@databricks/appkit-ui';

<InputOTPSeparator /* props */ />

```

## InputOTPSlot[​](#inputotpslot "Direct link to InputOTPSlot")

Individual character slot within the OTP input

**Source:** [`packages/appkit-ui/src/react/ui/input-otp.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/input-otp.tsx)

### Props[​](#props-3 "Direct link to Props")

| Prop    | Type     | Required | Default | Description |
| ------- | -------- | -------- | ------- | ----------- |
| `index` | `number` | ✓        | -       | -           |

### Usage[​](#usage-3 "Direct link to Usage")

```tsx
import { InputOTPSlot } from '@databricks/appkit-ui';

<InputOTPSlot /* props */ />

```