Skip to main content

Inputs

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/input"></script>

NPM#

npm i @pearson-ux/input --save

Demo#

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

Structure#

To add an input, just add the markup in your app where you want it displayed.

API#

Required#

All attributes in this API are required.

AttributeTypeDefaultDescription
labelString"Basic input label"The label you want displayed with input .

Optional#

All attributes in this API are optional.

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

Events#

The pearson-input component emits one event:

EventDescription
inputWill fire when a value is entered into the input.
const input = document.querySelector('pearson-input);
input.addEventListener('input', event => {
});

Additional Attributes#

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

const input = document.querySelector('pearson-input'),
shadowInput = input.shadowRoot.querySelector('input');
// 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="basicInput">Basic input label</label>
<input class="gr-input" id="basicInput" type="text"/>
<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>