Text-Area

On this page we will go through our Radio Button component

The text-area allows the user to enter a piece of text. A counter, placed at the bottom of the text area, will show the maximum number of characters that the user can enter.

Table of contents

Overview

Each text-area component is based on a global CSS class called “msds-text-area”. It is important to include them first as it is the main CSS class but. Without it, the UI of the component won’t work.

The text-area is linked to a label element and should be placed right below it like the way it is shown below.

As other form fields, the text-area layout contains an error message which is placed below the text-area label.

<form class="msds-forms">
    <div class="container">
        <div class="row">
            <div class="col-6">
                 <div class="msds-text-area">
                    <textarea class="msds-text-area__text-input" placeholder="Enter your description*" maxlength="400" type="textarea"></textarea>
                    <label class="msds-text-area__label" for="default-input">Enter your description*</label>
                    <p class="msds-text-area__message">
                        <span>Please be aware that the description should not be longer than 400 characters.</span> 
                        <span class="word-counter"> 
                            <span class="word-counter__current">0</span>
                            <span> / 400</span>
                        </span>
                    </p>
                </div>
            </div>            
        </div>
    </div>
</form>

Sizes

The text-area field comes like most of our forms components in 2 sizes, large whichi is our default size and small used in specific cases.

<form class="msds-forms">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="msds-text-area">
                    <textarea class="msds-text-area__text-input" placeholder="Enter your description*" maxlength="400" type="textarea"></textarea>
                    <label class="msds-text-area__label" for="default-input">Enter your description*</label>
                    <p class="msds-text-area__message">
                        <span>Please be aware that the description should not be longer than 400 characters.</span> 
                        <span class="word-counter"> 
                            <span class="word-counter__current">0</span>
                            <span> / 400</span>
                        </span>
                    </p>
                </div>
            </div>
            <div class="col-6">
                <div class="msds-text-area msds-text-area--small">
                    <textarea class="msds-text-area__text-input" placeholder="Enter your description*" maxlength="400" type="textarea"></textarea>
                    <label class="msds-text-area__label" for="default-input">Enter your description*</label>
                    <p class="msds-text-area__message">
                        <span>Please be aware that the description should not be longer than 400 characters.</span> 
                        <span class="word-counter"> 
                            <span class="word-counter__current">0</span>
                            <span> / 400</span>
                        </span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</form>

States

The styling of states are defined in the CSS file. Some of the states can be triggered programmatically by setting the relative property to the text-area element.

Hover State

State of the hover input field

<form class="msds-forms">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="msds-text-area">
                    <textarea id="text-area-hover" class="msds-text-area__text-input" placeholder="Enter your description*" maxlength="400" type="textarea"></textarea>
                    <label class="msds-text-area__label" for="default-input">Enter your description*</label>
                    <p class="msds-text-area__message">
                        <span>Please be aware that the description should not be longer than 400 characters.</span> 
                        <span class="word-counter"> 
                            <span class="word-counter__current">0</span>
                            <span> / 400</span>
                        </span>
                    </p>
                </div>
            </div>
            <div class="col-6">
                <div class="msds-text-area msds-text-area--small">
                    <textarea id="text-area-hover" class="msds-text-area__text-input" placeholder="Enter your description*" maxlength="400" type="textarea"></textarea>
                    <label class="msds-text-area__label" for="default-input">Enter your description*</label>
                    <p class="msds-text-area__message">
                        <span>Please be aware that the description should not be longer than 400 characters.</span> 
                        <span class="word-counter"> 
                            <span class="word-counter__current">0</span>
                            <span> / 400</span>
                        </span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</form>

Focus State

State of the focused text-area field

<form class="msds-forms">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="msds-text-area">
                    <textarea id="text-area-focus" class="msds-text-area__text-input" placeholder="Enter your description*" maxlength="400" type="textarea"></textarea>
                    <label class="msds-text-area__label" for="default-input">Enter your description*</label>
                    <p class="msds-text-area__message">
                        <span>Please be aware that the description should not be longer than 400 characters.</span> 
                        <span class="word-counter"> 
                            <span class="word-counter__current">0</span>
                            <span> / 400</span>
                        </span>
                    </p>
                </div>
            </div>
            <div class="col-6">
                <div class="msds-text-area msds-text-area--small">
                    <textarea id="text-area-focus" class="msds-text-area__text-input" placeholder="Enter your description*" maxlength="400" type="textarea"></textarea>
                    <label class="msds-text-area__label" for="default-input">Enter your description*</label>
                    <p class="msds-text-area__message">
                        <span>Please be aware that the description should not be longer than 400 characters.</span> 
                        <span class="word-counter"> 
                            <span class="word-counter__current">0</span>
                            <span> / 400</span>
                        </span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</form>

Disabled State

It can be disabled programmatically by setting the “disabled” attribute to the text-area field element.

<form class="msds-forms">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="msds-text-area"> 
                    <textarea class="msds-text-area__text-input" disabled placeholder="Enter your description*" maxlength="400" type="textarea"></textarea>
                    <label class="msds-text-area__label" for="default-input">Enter your description*</label>
                    <p class="msds-text-area__message">
                        <span>Please be aware that the description should not be longer than 400 characters.</span> 
                        <span class="word-counter"> 
                            <span class="word-counter__current">0</span>
                            <span> / 400</span>
                        </span>
                    </p>
                </div>
            </div>
            <div class="col-6">
                <div class="msds-text-area msds-text-area--small">
                    <textarea class="msds-text-area__text-input" disabled placeholder="Enter your description*" maxlength="400" type="textarea"></textarea>
                    <label class="msds-text-area__label" for="default-input">Enter your description*</label>
                    <p class="msds-text-area__message">
                        <span>Please be aware that the description should not be longer than 400 characters.</span> 
                        <span class="word-counter"> 
                            <span class="word-counter__current">0</span>
                            <span> / 400</span>
                        </span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</form>

Readonly State

In order to use the read-only text-area fields, you need to add the “readonly” attribute to the text-area field element.

<form class="msds-forms">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="msds-text-area">
                    <textarea class="msds-text-area__text-input" readonly="readonly" maxlength="400" type="textarea">Here would the description entered in read-only mode.</textarea>
                    <label class="msds-text-area__label" for="default-input">Enter your description*</label>
                    <p class="msds-text-area__message">
                        <span>Please be aware that the description should not be longer than 400 characters.</span> 
                        <span class="word-counter"> 
                            <span class="word-counter__current">0</span>
                            <span> / 400</span>
                        </span>
                    </p>
                </div>
            </div>
            <div class="col-6">
                <div class="msds-text-area msds-text-area--small">
                    <textarea class="msds-text-area__text-input" readonly="readonly" maxlength="400" type="textarea">Here would the description entered in read-only mode.</textarea>
                    <label class="msds-text-area__label" for="default-input">Enter your description*</label>
                    <p class="msds-text-area__message">
                        <span>Please be aware that the description should not be longer than 400 characters.</span> 
                        <span class="word-counter"> 
                            <span class="word-counter__current">0</span>
                            <span> / 400</span>
                        </span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</form>

Validations

The text-area field has 2 distincts validation styling. After entering some content, we will get either a success or error look and feel when the content is required or only an error if the content does not match the definition of a non required text-area.

Validation Success

The validation success look and feel of the text-area.

<form class="msds-forms">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="msds-text-area">
                    <textarea class="msds-text-area__text-input msds-text-area__text-input--success" placeholder="Enter your description*" maxlength="400" type="textarea"></textarea>
                    <label class="msds-text-area__label" for="default-input">Enter your description*</label>
                    <p class="msds-text-area__message">
                        <span>Please be aware that the description should not be longer than 400 characters.</span> 
                        <span class="word-counter"> 
                            <span class="word-counter__current">0</span>
                            <span> / 400</span>
                        </span>
                    </p>
                </div>
            </div>
            <div class="col-6">
                <div class="msds-text-area msds-text-area--small">
                    <textarea class="msds-text-area__text-input msds-text-area__text-input--success" placeholder="Enter your description*" maxlength="400" type="textarea"></textarea>
                    <label class="msds-text-area__label" for="default-input">Enter your description*</label>
                    <p class="msds-text-area__message">
                        <span>Please be aware that the description should not be longer than 400 characters.</span> 
                        <span class="word-counter"> 
                            <span class="word-counter__current">0</span>
                            <span> / 400</span>
                        </span>
                    </p>
                </div>
            </div>            
        </div>
    </div>
</form>

Validation Error

The validation error look and feel of the text-area.

<form class="msds-forms">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="msds-text-area">
                    <textarea class="msds-text-area__text-input msds-text-area__text-input--error" placeholder="Enter your description*" maxlength="400" type="textarea"></textarea>
                    <label class="msds-text-area__label" for="default-input">Enter your description*</label>
                    <p class="msds-text-area__message">
                        <span>Please be aware that the description should not be longer than 400 characters.</span> 
                        <span class="word-counter"> 
                            <span class="word-counter__current">0</span>
                            <span> / 400</span>
                        </span>
                    </p>
                </div>
            </div>
            <div class="col-6">
                <div class="msds-text-area msds-text-area--small">
                    <textarea class="msds-text-area__text-input msds-text-area__text-input--error" placeholder="Enter your description*" maxlength="400" type="textarea"></textarea>
                    <label class="msds-text-area__label" for="default-input">Enter your description*</label>
                    <p class="msds-text-area__message">
                        <span>Please be aware that the description should not be longer than 400 characters.</span> 
                        <span class="word-counter"> 
                            <span class="word-counter__current">0</span>
                            <span> / 400</span>
                        </span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</form>