InputOtp

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

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

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

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

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