OTP Input
A sequence of one-character alphanumeric inputs.
Features
- Full keyboard navigation.
- Can be controlled or uncontrolled.
- Supports pasting from clipboard
- Emit event when inputs were filled.
Install
Import
API
Root
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
defaultValue | string[] | undefined |
dir | Direction | ltr |
disabled | boolean | false |
id | string | - |
mask | boolean | - |
modelValue | string[] | - |
name | string | - |
otp | boolean | - |
placeholder | string | undefined |
required | boolean | false |
type | 'number' | 'text' | text |
| Event | Type |
|---|---|
complete | [_value: string[]] |
update:modelValue | [_value: string[]] |
| Slot (default) | Type |
|---|---|
modelValue | string[] |
| Data attribute | Value |
|---|---|
[data-complete] | Present when completed |
[data-disabled] | Present when disabled |
Input
| Props | Type | Default |
|---|---|---|
disabled | boolean | false |
index | number | - |
| Data attribute | Value |
|---|---|
[data-complete] | Present when completed |
[data-disabled] | Present when disabled |