import { Meta, ArgTypes, Canvas } from "@storybook/addon-docs/blocks";
import { TextArea } from "./TextArea";
import * as TextAreaStories from "./TextArea.stories";

<Meta of={TextAreaStories} />

# TextArea

TextArea behaves exactly like TextField, except it renders a text area input.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { TextArea } from "@simplybusiness/mobius";
```

Refer to [TextField docs](/story/core-docs-textfield--page) for usage and examples.

## Examples

### Default

<Canvas of={TextAreaStories.Default} />

### Controlled Value

<Canvas of={TextAreaStories.ControlledValue} />

### Disabled

<Canvas of={TextAreaStories.Disabled} />

### With Error

<Canvas of={TextAreaStories.WithError} />

### Valid

<Canvas of={TextAreaStories.Valid} />

### Invalid

<Canvas of={TextAreaStories.Invalid} />

## Props

<ArgTypes of={TextArea} />

## Component HTML Structure and Class names

The following HTML is rendered for a TextArea:

```html
<div class="mobius-text-area">
  <label class="mobius-label">{label}</label>
  <textarea class="mobius-text-area__input">{text}</textarea>
  <div class="mobius-error-message">{errors}</div>
</div>
```
