InputOTP

InputOTP is a component that allows users to input OTP.

View on GitHub

Usage

import { InputOTP } from '@nerdfish/ui'
<InputOTP.Root
	maxLength={6}
	render={({ slots }) => (
		<>
			<InputOTP.Group>
				{slots.slice(0, 3).map((slot, index) => (
					<InputOTP.Slot key={index} {...slot} />
				))}{' '}
			</InputOTP.Group>
			<InputOTP.Separator />
			<InputOTP.Group>
				{slots.slice(3).map((slot, index) => (
					<InputOTP.Slot key={index + 3} {...slot} />
				))}
			</InputOTP.Group>
		</>
	)}
/>

Field

Enter the 6-digit code sent to your phone

Patterns