Textarea
========

``Textarea`` component can be used to create a textarea element for long text inputs.

Example
+++++++

.. code-block:: javascript
    :linenos:

    import INKAPI from './inkapi.js'

    INKAPI.ready(async () => {

      const UI = INKAPI.ui;

      const sidebarObj = await UI.create({
        type: "Sidebar",
        sidebarTitle: "Personal Sidebar",
        icon: "./sample.svg",
        children: [``
          {
            type: "Textarea",
            id: "myTxt",
            rows: 4, // default 5
            placeholder: "write your special message.",
            styles: {
              borderRadius: 5,
            }
          },
        ],
      });

      console.log(sidebarObj);

    });


Options
+++++++

+--------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Name         | Type                                   | Description                                                                                                                                                                                                                                                                                         |
+==============+========================================+=====================================================================================================================================================================================================================================================================================================+
| id?          | ``String | Number``                    | You can assign a unique id to the component. It will be helpful for listening to events and removing component in future. If ``id`` is not given by user (or if given ``id`` is already associated with a UI component) then an automatically generated id is assigned to the component.            |
+--------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| type         | ``Textarea``                           | This field should be passed ``Textarea`` as value to create a Textarea component. This value is case-sensitive.                                                                                                                                                                                     |
+--------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| rows?        | ``Number``                             | Number of rows in textarea element. Defaults to 5                                                                                                                                                                                                                                                   |
+--------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| placeholder? | ``String``                             | Placeholder value for the textarea element.                                                                                                                                                                                                                                                         |
+--------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| styles?      | ``Object``                             | Custom styles for the element.                                                                                                                                                                                                                                                                      |
+--------------+----------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+

Shadow Methods
++++++++++++++

+----------------+-----------------------------+---------------------------------------------------------------------------------------------------------------------------------+
| Methods        | Arguments                   | Description                                                                                                                     |
+================+=============================+=================================================================================================================================+
| setValue       | value: ``String``           | This function is used to set value of the textarea component.                                                                   |
+----------------+-----------------------------+---------------------------------------------------------------------------------------------------------------------------------+
| getValue       | ``none``                    | This function is used to get the current value of the textarea component.                                                       |
+----------------+-----------------------------+---------------------------------------------------------------------------------------------------------------------------------+


Events
++++++

+-----------------------+---------------------------------------------------------------------------------------------------------------------------------+
| Event Keyword         | Description                                                                                                                     |
+=======================+=================================================================================================================================+
| change                | This event is triggered when the textarea value is changed.                                                                     |
+-----------------------+---------------------------------------------------------------------------------------------------------------------------------+


.. note::
  To learn more about shadow methods and shadow objects, please refer `here <./custom-ui-intro.html#shadow-ui-objects>`_.