@pagamio/frontend-commons-lib/lib/components/ui/TextField.d.ts

Pagamio library for Frontend reusable components like the form engine and table container

import React from 'react';
/**
 * Props for the TextField component.
 */
interface TextFieldProps {
    /** The current value of the input field. */
    value: string;
    /** The type of the input field (e.g., 'text', 'password', 'email'). */
    type?: React.HTMLInputTypeAttribute;
    /** The name of the input field. */
    name: string;
    /** The label text for the input field. */
    label: string;
    /** The placeholder text for the input field. */
    placeholder: string;
    /** Whether the input field has an error state. */
    error?: boolean;
    /** A function to update the value of the input field. */
    setValue: React.Dispatch<React.SetStateAction<string>>;
    /** Optional helper text to display below the input field. */
    helperText?: string;
    /** Optional callback function triggered when the input field loses focus. */
    onBlur?: () => void;
    /** Optional callback function triggered when a key is pressed in the input field. */
    onKeyDown?: (e: React.KeyboardEvent) => void;
}
/**
 * A reusable and customizable text input field component.
 * Supports regular text inputs, password inputs, and other HTML input types.
 * Includes optional error states, helper text, and password visibility toggle.
 *
 * @example
 * ```tsx
 * // Regular text input
 * <TextField
 *   value={username}
 *   setValue={setUsername}
 *   name="username"
 *   label="Username"
 *   placeholder="Enter your username"
 *   error={!!usernameError}
 *   helperText={usernameError}
 * />
 *
 * // Password input with visibility toggle
 * <TextField
 *   value={password}
 *   setValue={setPassword}
 *   name="password"
 *   label="Password"
 *   placeholder="Enter your password"
 *   type="password"
 *   error={!!passwordError}
 *   helperText={passwordError}
 * />
 * ```
 */
declare const TextField: ({ value, placeholder, name, type, label, error, setValue, helperText, onBlur, onKeyDown, }: TextFieldProps) => React.JSX.Element;
export default TextField;
export type { TextFieldProps };