Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# InputOTP

One-time password input with individual character slots

## Example​

    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​

One-time password input with individual character slots

Source: `packages/appkit-ui/src/react/ui/input-otp.tsx`

### 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​

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

    <InputOTP /* props */ />

## InputOTPGroup​

Container grouping OTP input slots together

Source: `packages/appkit-ui/src/react/ui/input-otp.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <InputOTPGroup /* props */ />

## InputOTPSeparator​

Visual separator between OTP slot groups

Source: `packages/appkit-ui/src/react/ui/input-otp.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <InputOTPSeparator /* props */ />

## InputOTPSlot​

Individual character slot within the OTP input

Source: `packages/appkit-ui/src/react/ui/input-otp.tsx`

### Props​

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

### Usage​

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

    <InputOTPSlot /* props */ />