import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";

import * as TextareaStories from "./Textarea.stories";

<Meta of={TextareaStories} />

# Textarea

The Textarea component is a multi-line text input field that enables users to enter longer text content. It's ideal for collecting detailed information, feedback, comments, or any content that requires multiple lines of text.

## Usage

<Canvas of={TextareaStories.Documentation} source={ { code: `
import React, { useState } from "react";

import { Textarea } from "@webiny/admin-ui";

const TextareaExample = () => {
const [value, setValue] = useState("");

    return (
        <Textarea
            label="Message"
            description="Enter your feedback or message"
            note="Please be specific and provide relevant details"
            placeholder="Type your message here..."
            required={true}
            value={value}
            onChange={newValue => setValue(newValue)}
        />
    );

};

export default TextareaExample;

`} }
additionalActions={[
{
title: 'Open in GitHub',
onClick: () => {
window.open(
'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Textarea/Textarea.tsx',
'_blank'
);
},
}
]}
/>

<Controls of={TextareaStories.Documentation} />

```jsx
import React, { useState } from "react";

import { Textarea } from "@webiny/admin-ui";

const TextareaExample = () => {
  const [value, setValue] = useState("");

  return (
    <Textarea
      label="Message"
      description="Enter your feedback or message"
      note="Please be specific and provide relevant details"
      placeholder="Type your message here..."
      required={true}
      value={value}
      onChange={newValue => setValue(newValue)}
    />
  );
};

export default TextareaExample;
```

## Examples

### With Validate Function

The Textarea component supports validation using the validation prop, as shown in the example above.
For more complex or reusable validation scenarios, you can use the validate prop, which accepts a custom validation function.
Try entering less than 10 characters to see it in action, and click on **Show code** to view the validation function.

<Canvas of={TextareaStories.WithValidateFunction} source={ { code: `
import React, { useState } from "react";

import { Textarea } from "@webiny/admin-ui";

const MessageTextarea = () => {
const [value, setValue] = useState("");
const [validation, setValidation] = useState({ isValid: true, message: "" });

    const validate = async () => {
        if (!value.trim()) {
            setValidation({ isValid: false, message: "This field is required" });
        } else if (value.length < 10) {
            setValidation({ isValid: false, message: "Message must be at least 10 characters long" });
        } else {
            setValidation({ isValid: true, message: "" });
        }
    };

    return (
        <Textarea
            label="Message"
            description="Enter a message (minimum 10 characters)"
            required={true}
            value={value}
            onChange={newValue => setValue(newValue)}
            validate={validate}
            validation={validation}
        />
    );

};` } }
/>

## Anatomy

### Textarea

<img src="/images/storybook/textarea/anatomy.png" alt="Textarea Anatomy" />

### Styles

<img src="/images/storybook/textarea/styles.png" alt="Styles" />

### Field Size

<img src="/images/storybook/textarea/field-size.png" alt="Field Size" />

### States and Styles

<img src="/images/storybook/textarea/states-and-styles.png" alt="States and Styles" />

### Label Anatomy

<img src="/images/storybook/textarea/label-anatomy.png" alt="Label Anatomy" />

### Label Properties

<img src="/images/storybook/textarea/label-properties.png" alt="Label Properties" />

### Label Options

<img src="/images/storybook/textarea/label-options.png" alt="Label Options" />

## Usage

### Used in forms

<img src="/images/storybook/textarea/used-in-forms.png" alt="Used in forms" />