Pin Input
Per-character input for short codes. Similar to InputOTP; PinInput is the more general reka-ui primitive (any pattern, any length), InputOTP is the OTP-tuned wrapper with paste support and complete event.
Default
Four-digit pin.
With separator
Split slots into groups with PinInputSeparator.
Mask
Pass mask to hide entered characters.
API Reference
Props, events, and slots for each sub-component.
PinInput
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | string[] | [] | Pin value as an array of single characters. Supports v-model. |
| type | "text" | "number" | "password" | "text" | Input type for each slot. |
| mask | boolean | false | Mask entered values (show dots). |
Events
| Event | Description |
|---|---|
| update:modelValue | Fires as characters are entered. Enables v-model. |
| complete | Fires when every slot is filled. |
PinInputSlot
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| index | number | — | Position of this slot (0-based). Forwards to reka-ui PinInputInput. |
PinInputGroup / PinInputSeparator
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Group wraps a run of slots; Separator draws a divider (default slot overrides the dash). |