A one-time password input component with customizable slots and separators
npm install @choice-ui/otp-inputA one-time password input component for verification codes. Built on top of input-otp library with custom styling and compound component pattern.
``tsx`
import { OtpInput } from "@choice-ui/react"
- Compound component pattern for flexible layout
- Multiple visual variants (default, light, dark)
- Disabled and invalid states
- Customizable separators
- Input pattern validation (numbers, alphanumeric)
- Animated caret indicator
- Keyboard and screen-reader friendly
`tsx`
`tsx
const [value, setValue] = useState("")
value={value}
onChange={setValue}
onComplete={(code) => console.log("Complete:", code)}
>
`
`tsx`
`tsx`
`tsx
// Numbers only (default)
...
// Alphanumeric
...
`
`tsx`
•
`ts
interface OTPInputRootProps {
/* Maximum number of characters /
maxLength: number
/* Current value /
value?: string
/* Callback when value changes /
onChange?: (value: string) => void
/* Callback when all slots are filled /
onComplete?: (value: string) => void
/* Visual style variant /
variant?: "default" | "light" | "dark"
/* Whether the input is disabled /
disabled?: boolean
/* Whether the input is in invalid state /
isInvalid?: boolean
/* Additional class for the container /
className?: string
/* Additional class for the hidden input /
inputClassName?: string
/* Input pattern for validation /
pattern?: string
/* Input mode for keyboard /
inputMode?: "numeric" | "text"
/* Children (groups, slots, separators) /
children: ReactNode
}
`
`ts`
interface OTPInputGroupProps extends ComponentProps<"div"> {}
`ts`
interface OTPInputSlotProps extends ComponentProps<"div"> {
/* Index of this slot (0-based) /
index: number
}
`ts`
interface OTPInputSeparatorProps extends ComponentProps<"div"> {
/* Custom separator content (default: "-") /
children?: ReactNode
}
- Uses Tailwind CSS via tailwind-variants in tv.tsclassName
- Customize using the prop on each sub-component
- Caret animation is bundled via CSS Module
- Built on input-otp library with accessibility features
- Proper keyboard navigation between slots
- Screen reader compatible
- Supports paste from clipboard
- Use appropriate inputMode for the expected input typeonComplete` callback to trigger verification
- Provide visual feedback for invalid states
- Use
- Consider showing remaining attempts for verification codes