OTP Input

A one-time password input component for verification codes. Built on top of input-otp library with custom styling and compound component pattern.

Import

``tsx
import { OtpInput } from "@choice-ui/react"
`

Features

- 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

Usage

$3

`tsx













`

$3

`tsx
const [value, setValue] = useState("")

maxLength={6}
value={value}
onChange={setValue}
onComplete={(code) => console.log("Complete:", code)}
>









`

$3

`tsx
...
...
...
`

$3

`tsx
...
...
`

$3

`tsx
// Numbers only (default)

...


// Alphanumeric

...

`

$3

`tsx







•







`

Props

$3

`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
}
`

$3

`ts
interface OTPInputGroupProps extends ComponentProps<"div"> {}
`

$3

`ts
interface OTPInputSlotProps extends ComponentProps<"div"> {
/* Index of this slot (0-based) /
index: number
}
`

$3

`ts
interface OTPInputSeparatorProps extends ComponentProps<"div"> {
/* Custom separator content (default: "-") /
children?: ReactNode
}
`

Styling

- Uses Tailwind CSS via tailwind-variants in tv.ts
- Customize using the className prop on each sub-component
- Caret animation is bundled via CSS Module

Accessibility

- Built on input-otp library with accessibility features
- Proper keyboard navigation between slots
- Screen reader compatible
- Supports paste from clipboard

Best practices

- Use appropriate inputMode for the expected input type
- Provide visual feedback for invalid states
- Use onComplete` callback to trigger verification
- Consider showing remaining attempts for verification codes