@tiller-ds/form-elements/MaskedInput.d.ts

Form elements module of Tiller Design System

/// <reference types="react" />
import { InputProps } from "./Input";
export declare type MaskedInputProps = {
    /**
     * When enabled, the mask changes on (un)focusing of the input element.
     *
     * When the input element is focused, the original mask is shown.
     *
     * When the input element is unfocused, the mask is shortened to exclude the placeholder characters.
     *
     * Off by default.
     */
    dynamic?: boolean;
    /**
     * When true, adding or deleting characters won't affect the position of other characters.
     */
    keepCharPositions?: boolean;
    /**
     * The desired mask shown in the field component (string or Regex expressions).
     */
    mask: (string | RegExp)[];
    /**
     * The accessor value for the input field component (for validation, fetching, etc.).
     */
    name: string;
    /**
     * Turns this field into a required field in the form. Only applies visual representation (* next to label),
     * still requires validation on frontend or backend to accompany this value if set to true.
     */
    required?: boolean;
    /**
     * Show or hide the desired mask for input values when no value is present in the field.
     */
    showMask?: boolean;
} & Omit<InputProps, "type">;
export default function MaskedInput({ name, disabled, placeholder, onChange, onBlur, mask, showMask, keepCharPositions, dynamic, ...props }: MaskedInputProps): JSX.Element;