Textarea

The Textarea component is designed for inputting and editing multiline text, making it a crucial element for forms, comments, feedback submissions, and any application requiring comprehensive text input. It provides a flexible, space-efficient solution for capturing extensive user inputs in a user-friendly manner.

Examples

Basic Usage

A minimal setup for a Textarea component, providing users with a straightforward multiline text input field:

Advanced Customization

Size Variations

This example showcases how to adjust the size of the Textarea component to accommodate different content lengths and interface designs, with small, medium, and large options:

States

Illustrates the Textarea component in various states such as disabled, auto-focus, error indication, and full-width styling to demonstrate its versatility in different UI contexts:

• Disabled

• Auto Focus

• Error

• Full Width

Value Initialization

Demonstrates setting a default value and placeholder text in the Textarea, guiding users with pre-populated content or prompting input with instructional text:

• Default value

• Placeholder text

Blocks

This component is used in the following Blocks:

Theme Customization

The Textarea component comes with a default theme that can be tailored to fit your application's design requirements:

Learn more about how to customize in the Theme documentation.

API

Fine-tune the Textarea component to suit your application's needs with these configurable properties:

Design and Usability Tips

• Animation and Transitions: Subtle animations, such as on focus or when resizing, can make the interaction with the Textarea more engaging. Ensure animations are smooth and do not detract from the primary function of text input.
• Adequate Size and Spacing: Ensure the default size of the Textarea accommodates the average input length to minimize user adjustments. Generous spacing within and around the Textarea helps prevent user errors and makes the text easier to edit.