Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    OtpInput

    A one-time code field with one box per character and a single tab stop.

    Storybook
    Storybook
    Source
    Source

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { OtpInput } from '@bigbang/ui';
    Source
    OtpInput.tsx
    Storybook
    OtpInput · Playground

    OtpInput is in the @bigbang/ui package.

    import { OtpInput } from '@bigbang/ui';
    

    <OtpInput label="Verification code" groupSize={3} onValueComplete={verify} />;

    Props

    Section titled “Props”
    labelRequired
    Description
    The visible label, bound to the first slot. The other slots are named by position ("Hane 2 / 6").
    Type
    string
    description
    Description
    Help text under the code, such as where it was sent. Linked with aria-describedby.
    Type
    ReactNode
    error
    Description
    When set, every slot is marked invalid and the message is read with the code.
    Type
    string
    invalid
    Description
    Marks the code invalid without a message.
    Type
    boolean
    Default
    false
    length
    Description
    Number of characters in the code.
    Type
    number
    Default
    6
    groupSize
    Description
    Draws a separator after every groupSize slots, such as 3 for "123 456". Screen readers do not read it.
    Type
    number
    validationType
    Description
    Which characters are accepted: digits only, letters and digits, or letters only. Others are dropped as the user types or pastes.
    Type
    'numeric' | 'alpha' | 'alphanumeric'
    Default
    'numeric'
    value
    Description
    Controlled code. Pass it with onValueChange.
    Type
    string
    defaultValue
    Description
    Initial code when the field is uncontrolled.
    Type
    string
    onValueChange
    Description
    Called with the new code on typing, deleting and paste.
    Type
    (value: string) => void
    onValueComplete
    Description
    Called once all slots are filled, also by paste or one-time-code autofill. Verify the code here.
    Type
    (value: string) => void
    purpose
    Description
    What the code is for. A confirm code approves an action, such as a payment, and never submits itself; a login code may (see autoSubmit).
    Type
    'login' | 'confirm'
    Default
    'confirm'
    autoSubmit
    Description
    Submits the surrounding form as soon as the code is complete. Only for purpose="login"; with confirm it is ignored, so the user always submits an approval code.
    Type
    boolean
    Default
    false
    mask
    Description
    Hides the characters as dots, for a code that is a secret such as a PIN.
    Type
    boolean
    Default
    false
    size
    Description
    Slot size: 32, 36 and 40 px squares.
    Type
    'sm' | 'md' | 'lg'
    Default
    'md'
    required
    Description
    The code is required for the form.
    Type
    boolean
    Default
    false
    disabled
    Description
    Disables every slot and the label.
    Type
    boolean
    Default
    false
    name
    Description
    Field name used when the form is submitted; the whole code is sent as one value.
    Type
    string
    className
    Description
    Added to the root element; use it for layout only.
    Type
    string

    Data attributes

    Section titled “Data attributes”
    • data-component="otp-input": on the root element.
    • data-part: label, group, slot, separator, description, error.
    • data-complete: on the group while the code is complete (Base UI).