Input OTP

نصب

pnpm dlx @simurgh-ui/cli add input-otp

import { InputOtp } from '@simurgh-ui/react/input-otp';
import { InputOtp as VueInputOtp } from '@simurgh-ui/vue/input-otp';
import { InputOtpComponent } from '@simurgh-ui/angular/input-otp';
import '@simurgh-ui/styles/input-otp.css';

پیش‌نمایش واقعی

Live component Input OTP ◆

Verification codeEnter the six-digit code.

استفاده

<Label htmlFor="code">کد تأیید</Label>
<InputOtp
  id="code"
  name="code"
  length={6}
  autoComplete="one-time-code"
  required
/>

<simurgh-label for="code">کد تأیید</simurgh-label>
<simurgh-input-otp
  id="code"
  name="code"
  [length]="6"
  [value]="code"
  [required]="true"
  (valueChange)="code = $event"
/>

رفتار و امنیت

paste کل کد، فیلتر کاراکتر نامعتبر و autofill سیستم‌عامل باید بدون حرکت دستی میان slotها کار کند. value نهایی به‌صورت یک رشته و با name در فرم شرکت می‌کند.

کد را در گزارش سیستمی یا analytics ذخیره نکنید. پیام انقضا و تلاش ناموفق را قابل‌مشاهده و live اعلام کنید، اما مقدار کد را نخوانید. label واحد برای کل کنترل بهتر از نام‌گذاری جداگانهٔ هر slot است.

Last verified on 2026-08-13 against Simurgh registry 0.1.1.