Tile UI Vue
Source code

Components

InputOtp

One-time password input.

Use InputOTP to collect a one-time code across multiple slots.

import { InputOTP, InputOTPGroup, InputOTPSlot } from '@tile-ui/vue';
 
export default function InputOtpDemo() {
	return (
		<InputOTP maxLength={6}>
			<InputOTPGroup>

Registry install

pnpm dlx shadcn@latest add @tile-ui/input-otp

Package usage

import { InputOTP } from '@tile-ui/vue';
 
<InputOTP maxLength={6} onComplete={(code) => console.log(code)} />

Highlights

  • Numeric, alphanumeric, and text modes
  • Slots and groups
  • Completion callback

Registry dependencies

Item Purpose
input-otp Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

InputOtp

Prop Type Default
value string —
defaultValue string —
maxLength number —
disabled boolean —
onChange (value: string) => void —
onComplete (value: string) => void —
mode 'numeric' | 'alphanumeric' | 'text' —
allowPaste boolean —

InputOtpSlot

Prop Type Default
index number —
PreviousInputGroupNextItem