MYDS Logo

    MYDS

    Beta

    Input OTP

    Komponen Input OTP (One-Time Password) membenarkan pengguna memasukkan kod yang dihantar ke e-mel atau telefon mereka untuk mengesahkan identiti mereka. Komponen ini biasanya digunakan dalam pengesahan dua faktor (2FA) dan proses pemulihan akaun.

    SourceStorybook

    Usage

    Import
    import { InputOTP, InputOTPSlot } from "@/components/myds";
    Anatomi
    <InputOTP maxLength={4}>
  <InputOTPSlot index={0} />
  <InputOTPSlot index={1} />
  <InputOTPSlot index={2} />
  <InputOTPSlot index={3} />
</InputOTP>

    Contoh

    Invalid

    Tetapkan prop invalid kepada true untuk menandakan input sebagai tidak sah.

    Disabled

    Nyahaktifkan input dengan menetapkan prop disabled kepada true.

    A
    B
    1
    2

    Komponen Terkawal

    Input boleh dikawal dengan menetapkan props value dan onChange. Dalam contoh di bawah, kami mengawal InputOTP dengan state dan menukar nilai kepada huruf besar pada perubahan.

    Menggunakan Prop pattern

    Hantar regex kepada prop pattern untuk hanya menerima nilai corak tertentu. Sebagai contoh, kita boleh menggunakan regex untuk hanya menerima nombor:

    Props

    InputOTP

    InputOTP menggunakan OTInput input-otp. Sila rujuk rujukan API dalam dokumentasi ini.

    PropTypeDefault
    maxLength
    number
    		-
    defaultValue
    string
    		-
    value
    string
    		-
    onChange
    function
    		-
    disabled
    boolean
    		false
    invalid
    boolean
    		false
    pattern
    string
    		-

    InputOTPSlot

    PropTypeDefault
    index
    number
    		-

    Sebelumnya

    Input

    Seterusnya

    Label

    Di halaman ini

    UsageContohInvalidDisabledKomponen TerkawalMenggunakan Prop patternPropsInputOTPInputOTPSlot