@syncfusion/react-inputs/src/textbox/textbox.d.ts

Syncfusion React Input package is a feature-rich collection of UI components, including Textbox, Textarea, Numeric-textbox and Form, designed to capture user input in React applications.

import { Variant, Size } from '@syncfusion/react-base';
import { LabelMode, inputBaseProps } from '../common/inputbase';
import * as React from 'react';
export { LabelMode, Variant, Size };
export interface TextBoxChangeEvent {
    /**
     * Specifies the initial event object received from the input element.
     */
    event?: React.ChangeEvent<HTMLInputElement>;
    /**
     * Specifies the current value of the TextBox.
     */
    value?: string;
}
/**
 * Specifies the available color schemes for the component.
 *
 * @enum {string}
 */
export declare enum Color {
    /** Success color scheme (typically green) for positive actions or status */
    Success = "Success",
    /** Warning color scheme (typically yellow/amber) for cautionary actions or status */
    Warning = "Warning",
    /** Error color scheme (typically red) for negative actions or status */
    Error = "Error"
}
export interface TextBoxProps extends inputBaseProps {
    /**
     * Specifies the value of the component. When provided, the component will be controlled.
     *
     * @default -
     */
    value?: string;
    /**
     * Specifies the default value of the component. Used for uncontrolled mode.
     *
     * @default -
     */
    defaultValue?: string;
    /**
     * Specifies the floating label type for the component.
     *
     * @default 'Never'
     */
    labelMode?: LabelMode;
    /**
     * Specifies the placeholder text for the component.
     *
     * @default -
     */
    placeholder?: string;
    /**
     * Specifies whether to display a clear button within the TextBox.
     * When enabled, a clear icon appears in the TextBox that allows users
     * to clear the input value with a single click.
     *
     * @default false
     */
    clearButton?: React.ReactNode;
    /**
     * Specifies the Callback that fired when the input value is changed.
     *
     * @event onChange
     * @returns {void}
     */
    onChange?: (event: TextBoxChangeEvent) => void;
    /**
     * Specifies the Color style of the TextBox. Options include 'Warning', 'Success' and 'Error'.
     *
     * @default -
     */
    color?: Color;
    /**
     * Specifies the icon to display at the beginning of the input.
     *
     * @default -
     */
    prefix?: React.ReactNode;
    /**
     * Specifies the icon to display at the end of the input.
     *
     * @default -
     */
    suffix?: React.ReactNode;
}
export interface ITextBox extends TextBoxProps {
    /**
     * Specifies the TextBox component element.
     *
     * @private
     * @default null
     */
    element?: HTMLInputElement | null;
}
type ITextBoxProps = TextBoxProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof TextBoxProps>;
/**
 * TextBox component that provides a standard text input with extended functionality.
 * Supports both controlled and uncontrolled modes based on presence of value or defaultValue prop.
 *
 * ```typescript
 * import { TextBox } from "@syncfusion/react-inputs";
 *
 * <TextBox defaultValue="Initial text" placeholder="Enter text" />
 * ```
 */
export declare const TextBox: React.ForwardRefExoticComponent<ITextBoxProps & React.RefAttributes<ITextBox>>;