InputOTP

One-time password input with individual character slots

Example

input-otp

Loading preview…

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 */ />