Components
Input OTP
A one-time password input with individual character slots and focus indicators.
The Input OTP component provides a set of individual character slots for entering one-time passwords or verification codes. It features automatic focus management, a hidden text input for keyboard capture, and a visual caret indicator for the active slot.
Preview
1
2
3
Installation
npx novaui-cli add input-otpImport
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
InputOTPSeparator,
} from 'novaui-components'Basic Usage
import { useState } from 'react'
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
} from 'novaui-components'
export function BasicOTP() {
const [value, setValue] = useState('')
return (
<InputOTP maxLength={6} value={value} onChangeText={setValue}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>
)
}With Separator
Split the OTP input into groups with a visual separator:
import { useState } from 'react'
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
InputOTPSeparator,
} from 'novaui-components'
export function OTPWithSeparator() {
const [value, setValue] = useState('')
return (
<InputOTP maxLength={6} value={value} onChangeText={setValue}>
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
<InputOTPSlot index={3} />
<InputOTPSlot index={4} />
<InputOTPSlot index={5} />
</InputOTPGroup>
</InputOTP>
)
}Four Digit PIN
const [pin, setPin] = useState('')
<InputOTP maxLength={4} value={pin} onChangeText={setPin} keyboardType="numeric">
<InputOTPGroup>
<InputOTPSlot index={0} />
<InputOTPSlot index={1} />
<InputOTPSlot index={2} />
<InputOTPSlot index={3} />
</InputOTPGroup>
</InputOTP>Props API
InputOTP
Extends React.ComponentPropsWithoutRef<typeof TextInput>:
| Prop | Type | Default | Description |
|---|---|---|---|
maxLength | number | required | Total number of OTP characters |
value | string | - | The current OTP value |
onChangeText | (text: string) => void | - | Callback when the value changes |
containerClassName | string | - | CSS classes for the outer container |
InputOTPGroup
Extends React.ComponentPropsWithoutRef<typeof View>:
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
InputOTPSlot
Extends React.ComponentPropsWithoutRef<typeof View>:
| Prop | Type | Default | Description |
|---|---|---|---|
index | number | required | The slot position (0-based) |
className | string | - | Additional CSS classes |
InputOTPSeparator
Extends React.ComponentPropsWithoutRef<typeof View>:
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
Best Practices
- Set appropriate maxLength: Match the expected code length (typically 4 or 6)
- Use numeric keyboard: Set
keyboardType="numeric"for numeric-only codes - Group with separators: Split long codes into groups of 3 for readability
- Auto-submit: Consider calling a submit function when all slots are filled
- Pair with Field: Wrap in a
Fieldcomponent for labels and validation messages