@yamada-ui/pin-input/dist/pin-input.d.mts

Yamada UI pin input component

import * as _yamada_ui_core from '@yamada-ui/core';
import { HTMLUIProps, ThemeProps, ColorModeToken, CSS } from '@yamada-ui/core';
import { FormControlOptions } from '@yamada-ui/form-control';

interface PinInputOptions {
    /**
     * The top-level id string that will be applied to the input fields.
     * The index of the input will be appended to this top-level id.
     */
    id?: string;
    /**
     * The type of values the pin-input should allow.
     *
     * @default 'number'
     */
    type?: "alphanumeric" | "number";
    /**
     * If `true`, the pin input receives focus on mount.
     *
     * @default false
     */
    autoFocus?: boolean;
    /**
     * The initial value of the pin input.
     */
    defaultValue?: string;
    /**
     * The border color when the input is invalid.
     */
    errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
    /**
     * The border color when the input is focused.
     */
    focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
    /**
     * The number of inputs to display.
     *
     * @default 4
     */
    items?: number;
    /**
     * If `true`, focus will move automatically to the next input once filled.
     *
     * @default true
     */
    manageFocus?: boolean;
    /**
     * If `true`, the input's value will be masked just like `type=password`.
     */
    mask?: boolean;
    /**
     * If `true`, the pin input component signals to its fields that they should.
     */
    otp?: boolean;
    /**
     * The placeholder for the pin input.
     *
     * @default '○'
     */
    placeholder?: string;
    /**
     * The value of the pin input.
     */
    value?: string;
    /**
     * Function called on input change.
     */
    onChange?: (value: string) => void;
    /**
     * Function called when all inputs have valid values.
     */
    onComplete?: (value: string) => void;
}
interface PinInputProps extends Omit<HTMLUIProps, "defaultValue" | "mask" | "onChange">, ThemeProps<"PinInput">, FormControlOptions, PinInputOptions {
}
/**
 * `PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.
 *
 * @see Docs https://yamada-ui.com/components/forms/pin-input
 */
declare const PinInput: _yamada_ui_core.Component<"div", PinInputProps>;
interface PinInputFieldProps extends HTMLUIProps<"input">, FormControlOptions {
}
declare const PinInputField: _yamada_ui_core.Component<"input", PinInputFieldProps>;

export { PinInput, PinInputField, type PinInputFieldProps, type PinInputProps };