React TextArea

The TextArea component enables users to enter and display multiple lines of text.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let’s add the React TextArea component to the project.

Installing Syncfusion® React packages

To use the TextArea component, install the @syncfusion/react-inputs package:

npm install @syncfusion/react-inputs

Adding CSS reference

The following CSS files are available in the Syncfusion® package that needs to be imported in the application.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-inputs/styles/material.css';

Adding TextArea component

To include the TextArea component in your application, import the TextArea from the @syncfusion/react-inputs package in App.tsx.

import { TextArea } from '@syncfusion/react-inputs';

Add the TextArea component in application as shown in below code example.

import { TextArea } from '@syncfusion/react-inputs';
import './App.css';

export default function App() {

    return (
        <div className="component-section">
            <div>About me</div>
            <TextArea defaultValue={'Tell us a little bit about yourself...'} width={300} />
        </div>
    );
};

Run the project

To run the project, use the following command:

npm run dev

The following example demonstrates the TextArea component is rendered with the given text.

Variants

The TextArea component enhances user interaction through its three distinct visual variants: Standard(default), Outlined and Filled.

Float label

The floating label functionality offers three distinct behavioral modes: Never, Auto and Always.

Controlled vs Uncontrolled

This component implements both controlled and uncontrolled state management paradigms, offering developers implementation flexibility:

• Controlled: External state management via parent props ensures centralized control, predictable data flow, and improved testability in complex interfaces.

• Uncontrolled: The component autonomously manages its internal state, minimizing boilerplate and simplifying standalone implementation with few external dependencies.

Default

The TextArea component allows an initial value using the defaultValue property, making it perfect for default text.

Disabled

When the disabled attribute is set to true, the TextArea component cannot be edited or focused.

Rows

The rows property sets TextArea component's initial height by specifying the number of visible text lines, enhancing user comfort for input like addresses or comments.

Columns

The cols property specifies the TextArea width in terms of characters per line, allowing for both short and long inputs. For instance, to allow around forty characters per line, set it accordingly.

Resizing

The TextArea component offers flexible resizing options: Both (default), Horizontal, Vertical, and None.

This option enables users to resize the TextArea component both vertically and horizontally.

Maximum length

The character counter features a TextArea with a maxLength attribute to limit input and provide instant feedback, maintaining data integrity.

Form support

The TextArea component works smoothly with the Form component, as illustrated below.

Accessibility

The TextArea component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the TextArea component is outlined below.

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The TextArea component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the TextArea component: