Input OTP
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { InputOTP } from "@corew500/ui/input-otp"
<InputOTP>Content</InputOTP>CMS Integration
Loading...
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | — |
| onChange | (newValue: string) => unknown | — | — |
| maxLength* | number | — | — |
| textAlign | enum | — | — |
| onComplete | (...args: any[]) => unknown | — | — |
| pushPasswordManagerStrategy | enum | — | — |
| pasteTransformer | (pasted: string) => string | — | — |
| containerClassName | string | — | Additional class name for the container element |
| noScriptCSSFallback | string | — | — |
| render | InputOTPRenderFn | — | — |
Accessibility
Keyboard Navigation
- Supports standard input keyboard navigation
Focus Management
- Slots are visual representation with focus indicator
Additional
- - Single hidden input manages actual value and form submission
- Paste support for full code entry
- Disabled state reduces opacity and prevents interaction
Localization
Translatable Content
- - Component is purely numeric/alphanumeric, no text content
- Surrounding labels should be translated by consuming application