import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';

# TextArea

<Meta title='TextArea' component='fw-textarea' />

## Props

<Props of='fw-textarea' />

## Usage

### Default

<Preview>
  <Story name='Default'>
    {() => `<fw-textarea>
  </fw-textarea>`}
  </Story>
</Preview>

### With placeholder text

<Preview>
  <Story name='WithPlaceholderAndValue'>
    {() => `<fw-textarea placeholder="Enter your address" value="Value of textarea">
  </fw-textarea>`}
  </Story>
</Preview>

### With rows and columns

<Preview>
  <Story name='WithRowsAndCols'>
    {() => `<fw-textarea placeholder="Enter your address" cols="50" rows="10">
  </fw-textarea>`}
  </Story>
</Preview>

### With label

<Preview>
  <Story name='WithLabelAndRequired'>
    {() => `<fw-textarea placeholder="Enter your address" cols="50" rows="5" label="Address" required="true">
  </fw-textarea>`}
  </Story>
</Preview>

### Error state

<Preview>
  <Story name='WithLabelAndRequiredAndErrorState'>
    {() => `<fw-textarea placeholder="Enter your address" cols="50" rows="5" label="Address" required="true" state="error" error-text="Please enter the complete address!" >
  </fw-textarea>`}
  </Story>
</Preview>

### Disabled

<Preview>
  <Story name='Disabled'>
    {() => `<fw-textarea placeholder="Enter your address" cols="50" rows="5" label="Address" disabled required="true">
  </fw-textarea>`}
  </Story>
</Preview>
