Docs/InputOTP

InputOTP

One-time password input with separate character slots. Client component.

Usage

tsx

1'use client'
2import { useState } from 'react'
3import { InputOTP, InputOTPSeparator } from '@storm-ds/ui'
4
5function MyOTP() {
6  const [otp, setOtp] = useState<string>('')
7  return (
8    <InputOTP
9      length={6}
10      value={otp}
11      onChange={setOtp}
12    />
13  )
14}

Default

Verification Code

tsx

1'use client'
2import { useState } from 'react'
3import { InputOTP, InputOTPSeparator } from '@storm-ds/ui'
4
5function OTPDemo() {
6  const [otp, setOtp] = useState<string>('')
7  return (
8    <div>
9      <InputOTP
10        length={6}
11        value={otp}
12        onChange={setOtp}
13      />
14      <p className="text-sm text-storm-muted mt-4">Code: {otp}</p>
15    </div>
16  )
17}

With Separator

tsx

1<InputOTP
2  length={6}
3  value={otp}
4  onChange={setOtp}
5>
6  <InputOTPSeparator />
7</InputOTP>

Short Code

4-Digit PIN

tsx

1<InputOTP
2  length={4}
3  value={otp}
4  onChange={setOtp}
5/>

Disabled

tsx

1<InputOTP
2  length={6}
3  value={otp}
4  onChange={setOtp}
5  disabled
6/>

Note

Separate input fields for each character. Auto-advances to next field. Use InputOTPSeparator for visual grouping (e.g., 3-3 split).

Props

Prop	Type	Default	Description
length	number	-	Number of OTP characters (default 6)
value	string	-	Current OTP code
onChange	(value: string) => void	-	Called when code changes
disabled	boolean	false	Disables all input fields
className	string	-	Custom classes

Use with AI

Create a Next.js client component using Storm UI's InputOTP. Import: `import { InputOTP, InputOTPSeparator } from '@storm-ds/ui'`. Use 'use client' and useState for OTP state. Pass length (number of digits), value, and onChange callback. Each character gets its own input field. Auto-advances to next field when digit entered, auto-selects previous when backspace used. Optional InputOTPSeparator child for visual grouping (e.g., render between 3rd and 4th field for 3-3 split). Optional disabled prop. Example: `const [otp, setOtp] = useState(''); <InputOTP length={6} value={otp} onChange={setOtp}><InputOTPSeparator /></InputOTP>`

DatePicker

PasswordInput