InputOTP

სტუმრის დადასტურების კოდი: ავტომატური ფოკუსი და კოდის ჩასმა.

მაგალითი

@llc-conciergia/ui/input-otp

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
  InputOTPSeparator,
} from "@llc-conciergia/ui/input-otp";

<InputOTP length={6} aria-label="დადასტურების კოდი">
  <InputOTPGroup>
    {[1, 2, 3].map((n) => (
      <InputOTPSlot key={n} aria-label={`კოდის სიმბოლო ${n}`} />
    ))}
  </InputOTPGroup>
  <InputOTPSeparator />
  <InputOTPGroup>
    {[4, 5, 6].map((n) => (
      <InputOTPSlot key={n} aria-label={`კოდის სიმბოლო ${n}`} />
    ))}
  </InputOTPGroup>
</InputOTP>

ინსტალაცია

terminal

pnpm add @llc-conciergia/ui

იმპორტი

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
  InputOTPSeparator,
} from "@llc-conciergia/ui/input-otp";

Conciergia CLI

npx @llc-conciergia/cli add input-otp

shadcn CLI

npx shadcn@latest add https://ui.conciergia.co/r/input-otp.json

Props

Prop	ტიპი	ნაგულისხმევი	აღწერა
InputOTP: length	number	—	აუცილებელი სიგრძე; ამდენივე slot ჩასვით.
InputOTP: value / defaultValue	string	—	კონტროლირებადი ან საწყისი კოდი.
InputOTP: onValueChange	(value, details) => void	—	კოდის ცვლილება.
InputOTP: onComplete / onValueComplete	(value, details) => void	—	შევსების callback; ორივეს მიწოდებისას ორივე გამოიძახება.
InputOTP: validationType / normalizeValue	Base UI validation props	numeric	ციფრები ნაგულისხმევად; ფილტრაცია მოქმედებს paste-ზეც.
InputOTP: disabled / readOnly / required / mask	boolean	false	მდგომარეობები და სიმბოლოების დაფარვა.
InputOTP: autoComplete / name / form / autoSubmit	Base UI OTPField.Root props	one-time-code	ფორმა და ავტოშევსება.
InputOTP: ref / className / …	Base UI OTPField.Root props	—	ჯგუფის დანარჩენი ატრიბუტები.
InputOTPGroup: children / className / ref / …	div props	—	slot-ების ვიზუალური დაჯგუფება.
InputOTPSlot: aria-label / ref / className / …	Base UI OTPField.Input props	—	აუცილებელია სახელი; ინდექსი განისაზღვრება DOM რიგით.
InputOTPSeparator: children / className / ref / …	span props	–	დეკორატიული გამყოფი, ეკრანის წამკითხველისგან დამალული.