---
name: TextArea
menu: Components
---

import PropsTable from 'website-src/components/PropsTable'
import { livePreviewStyle } from '../helpers/constants'
import TextArea from './TextArea'
import cactusTheme from '@repay/cactus-theme'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

# TextArea

### Try it out

export const code = `<TextArea id="my-id" name="textArea" />`

<LiveProvider code={code} scope={{ TextArea }}>
  <LiveEditor style={livePreviewStyle} />
  <LiveError />
  <LivePreview />
</LiveProvider>

## Best practices

- Use the `htmlFor` prop to associate labels with your text area to make them accessible.

## Basic usage

```jsx
import React, { useState, useCallback } from 'react'
import { Button, TextArea, Label } from '@repay/cactus-web'

export default function Form() {
  const [values, setValues] = useState({ textArea: '' })
  const handleChange = useCallback(event => {
    setValues({ ...values, [event.target.name]: event.target.value })
  })
  const handleSubmit = useCallback(event => {
    event.preventDefault()
    const data = { ...values }
    // send data to api
  })
  return (
    <form onSubmit={handleSubmit}>
      <Label htmlFor="my-id">Enter some text</Label>
      <TextArea id="my-id" name="textArea" onChange={handleChange} />
      <Button type="submit" variant="action">
        Submit
      </Button>
    </form>
  )
}
```

## Properties

<PropsTable of={TextArea} />