---
name: 'Field: Text area'
route: /components/common/forms/form-field-text-area
menu: Forms
edit: false
---

import { Playground, Props } from 'docz'
import { State, Toggle } from 'react-powerplug'
import FormFieldTextArea from './form-field-text-area'

# FormFieldTextArea
**SUBCATEGORY:** Forms

<hr />

## Text area
### Description
For multiple lines of text.

**Default**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormFieldTextArea
        {...state}
        labelText="Label"
        id="123"
        onChange={e => setState({ value: e.target.value })}
      />
    )}
  </State>
</Playground>

**Validation**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormFieldTextArea
        {...state}
        error="Notice"
        labelText="Label"
        onChange={e => setState({ value: e.target.value })}
      />
    )}
  </State>
</Playground>

**Disabled**
<Playground>
  <FormFieldTextArea
    labelText="Label"
    id="123"
    value="Text value"
    disabled />
</Playground>

**Placeholder**
<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormFieldTextArea
        {...state}
        labelText="Label"
        id="123"
        onChange={e => setState({ value: e.target.value })}
        placeholder="Text placeholder"
      />
    )}
  </State>
</Playground>

<hr />

## Text area (optional)
### Description
For multiple lines of text.

<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormFieldTextArea
        {...state}
        labelText="Label"
        labelTag="Tag"
        id="123"
        onChange={e => setState({ value: e.target.value })}
      />
    )}
  </State>
</Playground>


<hr />

## Text area (helper)
### Description
For multiple lines of text.

<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormFieldTextArea
        {...state}
        helperText="Helper text"
        labelText="Label"
        id="123"
        onChange={e => setState({ value: e.target.value })}
      />
    )}
  </State>
</Playground>

<hr />

## Properties
<Props of={FormFieldTextArea} />