Textareas in JTB_MD are input elements that designed for capturing multi-line content, enabling users to provide more extensive information beyond single-line inputs. They are ideal for scenarios where longer and more complex content, such as detailed messages, is necessary.

In order to maintain consistency throughout the library, textareas are designed as extensions of the main input elements rather than being independent input entities. Consequently, all features mentioned in the Inputs section, including add-ons, design capabilities, plugin usage, etc., are applicable to textareas as well.

Additionally, textareas are structured to inherit the designs from default input elements of JTB_MD for a cohesive user experience.

How to use

To create a textarea, you can simply add an <textarea> element that has .jtbInput class into your project.

                <!-- Example Textarea -->
<textarea class='jtbInput' placeholder='Hello!' ></textarea>

By default textareas are <textarea> elements of classic DOM, you can invoke all of its features without any restrictions such as rows or maxlength

                <!-- Example Textarea with 'rows' specified -->
<textarea class='jtbInput' rows='4'></textarea>

Disabling

To disable a textarea you can simply add .disabled class to your <textarea> element.

                    <!-- Disabled Textarea -->
<textarea class='jtbInput disabled'></textarea>

Styling

Once you are feeling safe with creation of textareas, you can easily style them via adding simple classes of inputs.

Never forget that you can leverage all classes from the Utilities section to seamlessly integrate elements with your design. However, the following pre-defined classes within textareas have been crafted to simplify your design workflow.

Removing radius

To remove border radius of textareas, you can simply apply .jtbInput-rect class into them.

                    <!-- Rectengular Textarea -->
<textarea class='jtbInput jtbInput-rect'></textarea>

Add-ons

You can activate the add-ons of your textareas via wrapping them with a container that has .jtbInput-container class. This encapsulation ensures a cohesive and unified appearance for elements working with textareas, and enhances your elements' functionalities.

                <!-- Add-ons activated -->
<div class='jtbInput-container'>
    <textarea class='jtbInput'></textarea>
</div>

Once you've encapsulated your element, you can free to use any add-ons of inputs that defined in JTB_MD:

Labels

Labels serve as concise definition texts accompanying your textareas, distinguishing and providing clarity throughout the input process. Unlike placeholders, labels remain visible at all stages, acting as an enduring guide for users, enhancing the overall user experience.

To add a label into your input container, you can simply add a <label> element with your desired definition into container.

Your message

Your name

                    <!-- Textarea with label -->
<div class='jtbInput-container'>
    <label>Your name</label>
    <textarea class='jtbInput'></textarea>
</div>

<!-- Textarea with label (You can add your label anywhere in the container.) -->
<div class='jtbInput-container'>
    <textarea class='jtbInput'></textarea>
    <label>Your name</label>
</div>

Icons

To incorporate an icon into your input container, simply include an <i> element with your preferred icon class. Unlike labels, the placement of the icon within the container determines whether the icon will appear before or after the input area.

                    <!-- Textarea with icon (before) -->
<div class='jtbInput-container'>
    <i class='jtbIL-user'></i>
    <textarea class='jtbInput' rows='3' placeholder='Before'></textarea>
</div>

<!-- Textarea with icon (after) -->
<div class='jtbInput-container'>
    <textarea class='jtbInput' rows='3' placeholder='After'></textarea>
    <i class='jtbIL-user'></i>
</div>

Helper Texts

Helper texts are elements that provide additional information for your textareas, guiding users as they enter data or offering feedback on their inputs. In JTB_MD, three distinct feedback attributes are defined for helper texts, each specialized for a specific scenario:

helper attribute is for displaying initial data before the user enters any input,
helper-invalid attribute for displaying data when the user enters input that doesn't meet the requirements,
helper-valid attribute for inputs that successfully fulfill the requirements.

To create a helper text for your elements, you can include your desired attribute with the text you want to show in its scenario directly to your textarea element

If you do not specify helper-invalid and helper-valid, the data in your helper attribute will be displayed to users at all stages of input.

                    <!-- Textarea with helper texts -->
<div class='jtbInput-container'>
    <textarea class='jtbInput validate' minlength='10' placeholder='Enter your message here.' helper='Please enter a message to test different states.' helper-invalid='Please enter at least 10 characters.' helper-valid='Seems legit m8!'></textarea>
</div>

Validation

All textareas are defined within the library seamlessly integrate with JTB_MD's jtbInput plugin, handling much of the heavy lifting for you. On the validation side of form elements, the plugin offers a validate method that can be triggered manually using $("#yourTextareaID").jtbInput('validate') in JavaScript at any time.

In addition to manual triggering, JTB_MD allows you to automatically trigger this method on initialization stage, value changes of elements and key presses on focus. To enable this, simply add the .validate class to the textarea you want to validate via the library's listeners.

                <!-- Validation activated Textarea -->
<textarea class='jtbInput validate'></textarea>

During the validation stage, JTB_MD assigns one of two classes (.valid or .invalid) to the textarea element (and its .jtbInput-container if it exists) based on the validation outcome.

If the element is empty during the initialization stage, the library does not validate the element, as it makes more sense. However, if the value of the element becomes empty after the user's focus action, it adds the .invalid class to it if the minlength attribute is defined for the textarea.

For the validation methods and their details you can check out the table below:

Element	Regexp pattern	Object control	Min-max value control	Length control	Example
textarea	-	-	-	Active

Where

Regexp pattern represents the pattern used to determine whether the value of area fits the specified criteria or not,
Object control involves additional control to identify the input type via creating JS objects,
Min-max value control works with element's min and max attributes and represents the possible range of values,
Length control works with element's minlength and maxlength attributes and represents the possible length of input in terms of characters.

The validation method of the library is linked to jtbInput plugin itself. To use it properly, ensure that you haven't manually removed it from your project.

For detailed information on plugins, refer to the JavaScript section.