@mantine/core/lib/components/MaskInput/MaskInput.d.ts

React components library focused on usability, accessibility and developer experience

import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
import { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';
export interface MaskInputProps extends BoxProps, __BaseInputProps, StylesApiProps<MaskInputFactory>, ElementProps<'input', 'size'> {
    /** Mask pattern string or array of string literals and RegExp objects */
    mask: string | Array<string | RegExp>;
    /** Override or extend the default token map */
    tokens?: Record<string, RegExp>;
    /** Called before masking on each keystroke, can return overrides for mask options */
    modify?: (value: string) => Partial<Pick<MaskInputProps, 'mask' | 'tokens' | 'slotChar' | 'separate'>> | undefined;
    /** When true, raw and display values are decoupled */
    separate?: boolean;
    /** Character displayed in unfilled slots, `"_"` by default */
    slotChar?: string | null;
    /** Show mask pattern even when field is empty and unfocused */
    alwaysShowMask?: boolean;
    /** Show mask placeholder on focus, `true` by default */
    showMaskOnFocus?: boolean;
    /** Transform each character before validation and insertion */
    transform?: (char: string) => string;
    /** Clear value on blur when mask is incomplete, `false` by default */
    autoClear?: boolean;
    /** Called on every change with raw and masked values */
    onChangeRaw?: (rawValue: string, maskedValue: string) => void;
    /** Called when all required mask slots are filled */
    onComplete?: (maskedValue: string, rawValue: string) => void;
    /** Escape hatch for advanced cursor/value manipulation */
    beforeMaskedStateChange?: (states: {
        previousState: {
            value: string;
            selection: {
                start: number;
                end: number;
            } | null;
        };
        currentState: {
            value: string;
            selection: {
                start: number;
                end: number;
            } | null;
        };
        nextState: {
            value: string;
            selection: {
                start: number;
                end: number;
            } | null;
        };
    }) => {
        value: string;
        selection: {
            start: number;
            end: number;
        } | null;
    };
    /** Assigns a function that clears the input value to the given ref */
    resetRef?: React.RefObject<(() => void) | null>;
}
export type MaskInputFactory = Factory<{
    props: MaskInputProps;
    variant: InputVariant;
    ref: HTMLInputElement;
    stylesNames: __InputStylesNames;
}>;
export declare const MaskInput: import("../..").MantineComponent<{
    props: MaskInputProps;
    variant: InputVariant;
    ref: HTMLInputElement;
    stylesNames: __InputStylesNames;
}>;