form-input-mask-field/dist/FormMaskField.d.ts

A customizable form mask field component built with TypeScript

import { default as React } from 'react';
import { FieldProps } from 'formik';
import { TextFieldProps } from '@mui/material/TextField';
export interface FormMaskFieldProps {
    /**
     * Mask pattern string where:
     * - '9' = digit (0-9)
     * - 'A' = letter (a-z, A-Z)
     * - '*' = alphanumeric (a-z, A-Z, 0-9)
     * - 'a' = lowercase letter (a-z)
     * - 'Z' = uppercase letter (A-Z)
     * - '#' = hexadecimal (0-9, A-F, a-f)
     * - Any other character = literal character
     *
     * Example: "99/99/9999" for date, "AAA-999" for code
     */
    mask?: string;
    /** Character to show in placeholder for mask positions (default: '_') */
    placeholderChar?: string;
    /** Convert input to uppercase automatically */
    toUpperCase?: boolean;
    /**
     * If true, Formik field value will contain only the input characters without mask literals
     * If false, Formik field value will contain the full masked value
     */
    returnCleanValue?: boolean;
    /** Custom onChange handler with additional mask-related data */
    onChange?: (event: {
        target: {
            value: string;
            cleanValue: string;
            rawValue: string;
        };
    } & React.ChangeEvent<HTMLInputElement>) => void;
    /** Show the mask pattern as helper text (default: false) */
    showMaskPattern?: boolean;
    /** Show the placeholder text (default: false) */
    showPlaceholder?: boolean;
}
export type FormMaskFieldComponentProps = FieldProps & TextFieldProps & FormMaskFieldProps;
export declare const FormMaskField: (props: FormMaskFieldComponentProps) => import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=FormMaskField.d.ts.map