@syncfusion/react-inputs/src/textarea/textarea.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 * as React from 'react';
import { ReactNode } from 'react';
import { LabelMode } from '../common/inputbase';
import { Variant } from '../textbox/textbox';
export { LabelMode };
export interface TextAreaChangeEvent {
    /**
     * Specifies the initial event object received from the textarea element.
     */
    event?: React.ChangeEvent<HTMLTextAreaElement>;
    /**
     * Specifies the current value of the TextArea.
     */
    value?: string;
}
/**
 * Specifies the available resize modes for components that support resizing.
 *
 * @enum {string}
 */
export declare enum ResizeMode {
    /**
     * Disables resizing functionality.
     */
    None = "None",
    /**
     * Enables resizing in both horizontal and vertical directions.
     */
    Both = "Both",
    /**
     * Enables resizing only in the horizontal direction.
     */
    Horizontal = "Horizontal",
    /**
     * Enables resizing only in the vertical direction.
     */
    Vertical = "Vertical"
}
export interface TextAreaProps {
    /**
     * 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 the resize mode for the textarea
     *
     * @default ResizeMode.Both
     */
    resizeMode?: ResizeMode;
    /**
     * Specifies the number of columns for the textarea
     *
     * @default -
     */
    cols?: number;
    /**
     * Specifies whether to show a clear button within the input field.
     * When enabled, a clear button (×) appears when the field has a value,
     * allowing users to quickly clear the input with a single click.
     *
     * @default false
     */
    clearButton?: ReactNode;
    /**
     * Specifies the number of rows for the textarea
     *
     * @default 2
     */
    rows?: number;
    /**
     * Specifies the Callback that fired when the input value is changed.
     *
     * @event onChange
     * @returns {void}
     */
    onChange?: (event: TextAreaChangeEvent) => void;
    /**
     * Specifies the visual style variant of the component.
     *
     * @default Variant.Standard
     */
    variant?: Variant;
}
export interface ITextArea extends TextAreaProps {
    /**
     * Specifies the TextArea component element.
     *
     * @private
     * @default null
     */
    element?: HTMLTextAreaElement | null;
}
type ITextAreaProps = TextAreaProps & Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, keyof TextAreaProps>;
/**
 * TextArea component that provides a multi-line text input field with enhanced functionality.
 * Supports both controlled and uncontrolled modes based on presence of value or defaultValue prop.
 *
 * ```typescript
 * import { TextArea } from '@syncfusion/react-inputs';
 *
 * <TextArea defaultValue="Initial text" placeholder="Enter text" rows={5} cols={40} />
 * ```
 */
export declare const TextArea: React.ForwardRefExoticComponent<ITextAreaProps & React.RefAttributes<ITextArea>>;
export default TextArea;