# TextArea

A text input field for multi-line text editing with customizable features.

### **Import**
  ```tsx
  import { TextArea } from '@app-studio/web';
  ```

### **Default**
```tsx
import React from 'react';

import { TextArea } from '@app-studio/web';

export const DefaultArea = () => (
  <TextArea name="comments" placeholder="Enter your thoughts" />
);

```

### **colorScheme**
Optional color scheme for the component.

```tsx
import React from 'react';
import { Vertical } from '@app-studio/web';

import { TextArea } from '@app-studio/web';

export const ColorArea = () => {
  return (
    <Vertical gap={10}>
      <TextArea name="surname" label="Surname" colorScheme="theme-secondary" />
      <TextArea
        name="name"
        label="Name"
        colorScheme="theme-primary"
        variant="outline"
      />
    </Vertical>
  );
};

```

### **helperText**
Helper text that appears below the text area.

```tsx
import { useState } from 'react';
import React from 'react';

import { Button } from '@app-studio/web';
import { TextArea } from '@app-studio/web';

import { Vertical } from '@app-studio/web';

export const HelperTextArea = () => {
  const initialValues = {
    guess: '',
  };
  const [formValues, setFormValues] = useState(initialValues);
  const [formErrors, setFormErrors] = useState(initialValues);

  const validate = (values: any) => {
    const errors: any = {};
    if (!values.guess) {
      errors.guess = 'Required';
    }

    setFormErrors(errors);
  };

  const handleChange = (event: any) => {
    setFormValues({ ...formValues, [event.target.name]: event.target.value });
  };

  const handleSubmit = (event: any) => {
    event.preventDefault();
    validate(formValues);
    if (Object.values(formErrors).length === 0) {
      alert(formValues.guess);
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <Vertical gap={10}>
        <TextArea
          name="guess"
          placeholder="Write here..."
          helperText={formErrors.guess}
          error={!!formErrors.guess}
          onChange={handleChange}
        />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Vertical>
    </form>
  );
};

```

### **placeholder**
Placeholder text for the text area when it is empty.

```tsx
import React from 'react';
import { Button } from '@app-studio/web';

import { Horizontal } from '@app-studio/web';

import { TextArea } from '@app-studio/web';

export const PlaceholderArea = () => {
  const handleSubmit = (event: any) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    alert(formData.get('comment'));
  };
  return (
    <form onSubmit={handleSubmit}>
      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
        <TextArea name="comment" placeholder="Type your comment here..." />
        <Button type="submit" height="40px" isAuto>
          Submit
        </Button>
      </Horizontal>
    </form>
  );
};

```