Input Otp

An input component for one-time password entry, optimized for entering codes received via email or SMS.

How to Import

Add this import to your component file

app/page.tsx

1import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@/components/lightswind/input-otp';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

maxLength	number	-	The maximum number of characters allowed.	Required
value	string	-	The controlled value of the input.	Optional
defaultValue	string	-	The default value when the component is initially rendered.	Optional
onChange	(value: string) => void	-	Event handler called when the input value changes.	Optional
placeholder	string	â—‹	The placeholder character to display when the input is empty.	Optional
disabled	boolean	false	When true, prevents the user from interacting with the input.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@/components/lightswind/input-otp';
2
3export function InputOTPDemo() {
4  return (
5    <InputOTP maxLength={6}>
6      <InputOTPGroup>
7        <InputOTPSlot index={0} />
8        <InputOTPSlot index={1} />
9        <InputOTPSlot index={2} />
10      </InputOTPGroup>
11      <InputOTPSeparator />
12      <InputOTPGroup>
13        <InputOTPSlot index={3} />
14        <InputOTPSlot index={4} />
15        <InputOTPSlot index={5} />
16      </InputOTPGroup>
17    </InputOTP>
18  );
19}

Previousinput

Nextlabel

A product byＭＵＨＩＬＡＮ and Team❤️.

Input Otp

An input component for one-time password entry, optimized for entering codes received via email or SMS.

...

How to Import

Add this import to your component file

app/page.tsx

1import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@/components/lightswind/input-otp';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

maxLength	number	-	The maximum number of characters allowed.	Required
value	string	-	The controlled value of the input.	Optional
defaultValue	string	-	The default value when the component is initially rendered.	Optional
onChange	(value: string) => void	-	Event handler called when the input value changes.	Optional
placeholder	string	â—‹	The placeholder character to display when the input is empty.	Optional
disabled	boolean	false	When true, prevents the user from interacting with the input.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from '@/components/lightswind/input-otp';
2
3export function InputOTPDemo() {
4  return (
5    <InputOTP maxLength={6}>
6      <InputOTPGroup>
7        <InputOTPSlot index={0} />
8        <InputOTPSlot index={1} />
9        <InputOTPSlot index={2} />
10      </InputOTPGroup>
11      <InputOTPSeparator />
12      <InputOTPGroup>
13        <InputOTPSlot index={3} />
14        <InputOTPSlot index={4} />
15        <InputOTPSlot index={5} />
16      </InputOTPGroup>
17    </InputOTP>
18  );
19}

Previousinput

Nextlabel

A product byＭＵＨＩＬＡＮ and Team❤️.

Input Otp

How to Import

Props

Basic Usage

On This Page

Contribute

Input Otp

How to Import

Props

Basic Usage

On This Page

Contribute

React Input Otp Component - Lightswind UI

Key Details of React Input Otp

Input Otp

How to Import

Props

Basic Usage

On This Page

Contribute

Input Otp

How to Import

Props

Basic Usage

On This Page

Contribute