Textarea

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

Installation

1yarn add @hakuna-matata-ui/textarea

Import component

1import { Textarea } from "@hakuna-matata-ui/textarea"

Basic Usage

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

Disabled

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

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

Invalid

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

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

Sizes

Pass the size prop to change the size of the textarea

1<>
2  <Textarea
3    size="sm"
4    placeholder="A sample placeholder"
5    defaultValue="This is a small textarea"
6  />
7  <Textarea
8    placeholder="A sample placeholder"
9    defaultValue="This is a default textarea"
10  />
11  <Textarea
12    size="lg"
13    placeholder="A sample placeholder"
14    defaultValue="This is a large textarea"
15  />
16</>

Resize

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

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