MYDS Logo

    MYDS

    Beta

    Input OTP

    The Input OTP (One-Time Password) component allows users to enter a code sent to their email or phone to verify their identity. This component is commonly used in two-factor authentication (2FA) and account recovery processes.

    SourceStorybook

    Usage

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

    Examples

    Invalid

    Set the invalid prop to true to mark the input as invalid.

    Disabled

    Disable the input by setting the disabled prop to true.

    A
    B
    1
    2

    Controlled Component

    The input can be controlled by setting the value and onChange props. In the example below, we control InputOTP with a state and convert the values to uppercase on change.

    Using the pattern Prop

    Pass a regex to the pattern prop to only accept values of a certain pattern. For example, we can use a regex to only accept numbers:

    Props

    InputOTP

    InputOTP is abstracted from input-otp's OTPInput. Please refer to the API references in this documentation.

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

    InputOTPSlot

    PropTypeDefault
    index
    number
    		-

    Previous

    Input

    Next

    Label

    On this page

    UsageExamplesInvalidDisabledControlled ComponentUsing the pattern PropPropsInputOTPInputOTPSlot