Package Exports

@chakra-ui/textarea
@chakra-ui/textarea/dist/chakra-ui-textarea.cjs.js
@chakra-ui/textarea/dist/chakra-ui-textarea.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@chakra-ui/textarea) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Textarea

The Textarea component allows you to easily create multi-line text inputs.

Installation

yarn add @chakra-ui/textarea

Import component

import { Textarea } from "@chakra-ui/textarea"

Basic Usage

<Textarea defaultValue="This is a textarea" placeholder="A simple textarea" />

Disabled

Pass the isDisabled prop to put the textarea in the disabled state

<Textarea isDisabled placeholder="A disabled textarea" />

Invalid

Pass the isInvalid prop to put the textarea in the invalid state

<Textarea isInvalid placeholder="An invalid textarea" />

Sizes

Pass the size prop to change the size of the textarea

<>
  <Textarea
    size="sm"
    placeholder="A sample placeholder"
    defaultValue="This is a small textarea"
  />
  <Textarea
    placeholder="A sample placeholder"
    defaultValue="This is a default textarea"
  />
  <Textarea
    size="lg"
    placeholder="A sample placeholder"
    defaultValue="This is a large textarea"
  />
</>

Resize

Pass the resize prop to resize to textarea in the vertical or horizontal direction

<Textarea placeholder="Here is a sample placeholder" resize="horizontal" />