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.

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

Optional

All attributes in this API are optional.

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

Events

The pearson-input component emits one event:

Event	Description
input	Will 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>