Skip to main content

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.

AttributeTypeDefaultDescription
labelString"Basic textarea label"The label you want displayed with the textarea.

Optional#

All attributes in this API are optional.

AttributeTypeDefaultDescription
placeholderstringunsetAdds placeholder text to the textarea.
disabledbooleanfalseDetermines whether the textarea is disabled.
errorstringunsetAdds error styling and warning message.
valueStringunsetThe value of the textarea.

Events#

The pearson-textarea component emits one event:

EventDescription
inputWill 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>