import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import Textarea from '../Textarea';
import * as TextareaStories from './Textarea.stories';

<Meta of={TextareaStories} />

# Textarea

<br />

## `Textareas` are used to allow for text input while also providing some props allowing further customization.

The `label` and `name` props are required for a11y reasons, if not there the `<Textarea />` will not appear.

<br />

### Default

<Canvas>
  <Story of={TextareaStories.Default} />
</Canvas>

### With placeholder

<Canvas>
  <Story of={TextareaStories.WithPlaceholder} />
</Canvas>

### Required

<Canvas>
  <Story of={TextareaStories.Required} />
</Canvas>

### With default value

<Canvas>
  <Story of={TextareaStories.WithDefaultValue} />
</Canvas>

### Read only

<Canvas>
  <Story of={TextareaStories.ReadOnly} />
</Canvas>

### With hidden label (a11y)

<Canvas>
  <Story of={TextareaStories.WithHiddenLabelA11Y} />
</Canvas>

### With error

<Canvas>
  <Story of={TextareaStories.WithError} />
</Canvas>

### Disabled

<Canvas>
  <Story of={TextareaStories.Disabled} />
</Canvas>

## Usage Example

```jsx
import Textarea from '@appdirect/sfb-theme-components/src/atoms/textarea/Textarea'

<Textarea
    name="name"
    label="label"
    defaultValue="default value"
    error="This is required"
    disabled
    readOnly
    hiddenLabel
/>

```

## Props

<ArgsTable of={Textarea} />
