Docs
πŸ—οΈ ⏐ Components
Form
Textarea

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:

  • root{}(6 keys)
      Show all

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:

PropDescriptionDefault
containerClassNameAdditional classname for the input container element.
string
errorMark field as errored
boolean
fullWidthIf true, the field will take up the full width of its container.
boolean
sizeSize of the field.
string
medium
themeTheme for the Textarea.
TextareaTheme
inputRefReference to the input element.
RefObject<HTMLTextAreaElement>
containerRefReference to the container element.
RefObject<HTMLDivElement>
blurMethod to blur the input element.
() => void
focusMethod to focus the input element.
() => void

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.