Inputs
#
InstallationFor 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>
#
NPMnpm i @pearson-ux/input --save
#
Demo <pearson-input label="Demo input label"></pearson-input>
#
StructureTo add an input, just add the markup in your app where you want it displayed.
#
API#
RequiredAll attributes in this API are required.
Attribute | Type | Default | Description |
---|---|---|---|
label | String | "Basic input label" | The label you want displayed with input . |
#
OptionalAll 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 |
#
EventsThe 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 AttributesIf 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 MarkupDo you prefer to use HTML instead of a web component? No problem, use the markup below along with CSS.
<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>