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>