Text Area

Installation

For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.

CDN

<script src="https://unpkg.com/@pearson-ux/textarea"></script>

NPM

npm i @pearson-ux/textarea --save

Demo

    <pearson-textarea label="Demo textarea label"></pearson-textarea>

Structure

To add a textarea, just add the markup in your app where you want it displayed.

API

Required

All attributes in this API are required.

Attribute	Type	Default	Description
label	String	"Basic textarea label"	The label you want displayed with the textarea.

Optional

All attributes in this API are optional.

Attribute	Type	Default	Description
placeholder	string	unset	Adds placeholder text to the textarea.
disabled	boolean	false	Determines whether the textarea is disabled.
error	string	unset	Adds error styling and warning message.
value	String	unset	The value of the textarea.

Events

The pearson-textarea component emits one event:

Event	Description
input	Will fire when a value is entered into the textarea.

const textarea = document.querySelector('pearson-textarea');
textarea.addEventListener('input', event => {
    console.log(textarea.value)
});

Additional Attributes

If you want to change an attribute, or listen for an event coming from the encapsulated textarea you can use javascript to access the components shadow dom.

const textarea = document.querySelector('pearson-textarea'),
shadowInput = textarea.shadowRoot.querySelector('textarea');

// you can now add attributes or listen for events on the shadowInput.

HTML Markup

Do you prefer to use HTML instead of a web component? No problem, use the markup below along with CSS.

Forms can be tricky, so here is some guidance around how to implement accessibility successfully.

<div class="gr-form-element">
    <label class="gr-label" for="textareaId">Textarea label</label>
    <textarea id="textareaId" class="gr-textarea" cols="30" rows="5"></textarea>
    <div class="error-state">
        <svg focusable="false" class="icon-18" aria-hidden="true">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#warning-18"></use>
        </svg>
        <span class="gr-meta">Warning Text</span>
    </div>
</div>