InputOTP

'use client'

import {
	InputOTP,
	InputOTPGroup,
	InputOTPSeparator,
	InputOTPSlot,
} from '@nerdfish/ui'

export function InputOTPExample() {
	return (
		<InputOTP
			maxLength={6}
			render={({ slots }) => (
				<>
					<InputOTPGroup>
						{slots.slice(0, 3).map((slot, index) => (
							<InputOTPSlot key={index} {...slot} />
						))}{' '}
					</InputOTPGroup>
					<InputOTPSeparator />
					<InputOTPGroup>
						{slots.slice(3).map((slot, index) => (
							<InputOTPSlot key={index + 3} {...slot} />
						))}
					</InputOTPGroup>
				</>
			)}
		/>
	)
}

'use client'

import {
	Description,
	Field,
	InputOTP,
	InputOTPGroup,
	InputOTPSeparator,
	InputOTPSlot,
	Label,
} from '@nerdfish/ui'

export function InputOTPFieldExample() {
	return (
		<Field>
			<Label htmlFor="otp">
				OTP
				<Description>Enter the 6-digit code sent to your phone</Description>
			</Label>

			<InputOTP
				id="otp"
				name="otp"
				maxLength={6}
				render={({ slots }) => (
					<>
						<InputOTPGroup>
							{slots.slice(0, 3).map((slot, index) => (
								<InputOTPSlot key={index} {...slot} />
							))}{' '}
						</InputOTPGroup>
						<InputOTPSeparator />
						<InputOTPGroup>
							{slots.slice(3).map((slot, index) => (
								<InputOTPSlot key={index + 3} {...slot} />
							))}
						</InputOTPGroup>
					</>
				)}
			/>
		</Field>
	)
}

'use client'

import {
	InputOTP,
	InputOTPGroup,
	inputOTPPatterns,
	InputOTPSeparator,
	InputOTPSlot,
} from '@nerdfish/ui'

export function InputOTPPatternsExample() {
	return (
		<InputOTP
			maxLength={6}
			pattern={inputOTPPatterns.digits}
			render={({ slots }) => (
				<>
					<InputOTPGroup>
						{slots.slice(0, 3).map((slot, index) => (
							<InputOTPSlot key={index} {...slot} />
						))}{' '}
					</InputOTPGroup>
					<InputOTPSeparator />
					<InputOTPGroup>
						{slots.slice(3).map((slot, index) => (
							<InputOTPSlot key={index + 3} {...slot} />
						))}
					</InputOTPGroup>
				</>
			)}
		/>
	)
}