Chakra-UI

I♥️Components

Textarea

|

Chakra Docs

|

⦾ The Chakra UI Textarea component is a versatile tool for creating multi-line text inputs with ease. It is a wrapper that simplifies the creation of multi-line text inputs and offers various props for customization, theming, and additional functionality.

The Textarea component can be imported as follows:

Examples

Basic Usage

⦾ Using the Textarea component is very simple. It merely requires the the element itself. But you can also supply a placeholder text that takes the place of whatever text a user will later input.

Code

Controlled Textarea

⦾ The controlled Textarea allows you to manage its value through state, i.e. a controlled textarea refers to a textarea input whose value is controlled and managed by the component's parent or container component.

In a controlled textarea, the value of the textarea is not directly modified by user input. Instead, it is updated and synchronized with the component's state, allowing you to have full control over its value and behavior.

In the following example, the value state variable is used to store the current value of the textarea. The setValue function allows us to update the value of the textarea by modifying the state.

Controlled Text Area:

Code

Customzing Size

⦾ The Textarea component allows you to control the resize behavior. The resize property controls whether an element is draggable / resizable and in which directions.

The Chakra Textarea component comes with built-in support for draggable textarea resizing. This means that the resizing behavior is already enabled by default without the need for additional CSS styles or customization.

Resize:

Code

Disabling a Textarea

⦾ The Textarea component can be easily disabled to prevent user interaction. Use the isDisabled prop to achieve this functionality.

Code

Invalid Textarea

⦾ To indicate an error state in the Textarea, use the isInvalid prop.

Code

Did you know?

Creative Idea No. 1

Auto-Expanding Textarea: This example demonstrates how to create an auto-expanding textarea that adjusts its height automatically based on the content. With this feature, the textarea will dynamically adjust its height as the user types, providing a seamless experience without the need for scrollbars. Users can focus on their content while the textarea grows to accommodate it.

Code

Creative Idea No. 2

Character Count Limit: This example shows how to implement a character count limit for the Textarea, providing real-time feedback to users about the remaining characters they can enter. This way, users will be able to see how many characters they have remaining while typing or pasting their content, and you can easily enforce a character count limit.

0/100 characters used

Code

Creative Idea No. 3

Tag Input: You can implement tag input using a Textarea component. With this functionality, users can easily enter and manage tags for various purposes, such as categorizing items, adding keywords, or creating personalized labels. In the example below, we explore a TagInput component that allows users to enter tags and dynamically displays them as stylish labels. You can even set default tags to provide users with a starting point.
One TagTwo TagNo Red TagNo Blue Tag

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.