Select / Multi Select
#
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.
Important Note: This component uses our icon component. Please add this as a dependency.
#
CDN<script src="https://unpkg.com/@pearson-ux/icon"></script><script src="https://unpkg.com/@pearson-ux/select"></script>
#
NPMnpm i @pearson-ux/icon--savenpm i @pearson-ux/select--save
#
Demo#
Single Select<pearson-select label="This is the label"> <option value="one">Option One</option> <option value="two">Option Two</option> <option value="three">Option Three</option> <option value="four">Option Four</option></pearson-select>
#
Multi Select<pearson-select label="This is the label" multiple> // options here</pearson-select>
#
StructureFollow these steps to successfully build out the select component. Start by adding a <pearson-select>
element to your application.
<pearson-select label="enter label"></pearson-select>
Next, you can add options to your select by adding a child element of <option>
with an attribute of value
and the value being a descriptive string that represents the option.
<pearson-select label="enter label"> <option value="one"></option></pearson-select>
#
API#
RequiredAll attributes in this API are required.
Attribute | Type | Default | Description |
---|---|---|---|
label | String | "I am a select box" | The label you want displayed with input . |
#
OptionalAll attributes in this API are optional.
Attribute | Type | Default | Description |
---|---|---|---|
multiple | boolean | 'false' | Changes the single select dropdown to a multi select combobox. |
size | String | unset | The number of rows you want the multi select combobox to have |
disabled | boolean | false | Determines whether the input is disabled. |
error | string | 'error warning' | Adds error styling and warning message. |
#
EventsThe pearson-input
component does not emit any events, however you can still capture native events from the select by tapping into the components shadowroot.
const selectComponent = document.querySelector('pearson-select'), select = selectComponent.shadowRoot.querySelector('select');
select.addEventListener('change', event => { console.log(event.target.options) })
#
Additional AttributesYou can add any native attribute to the select by tapping into the components shadowroot.
const selectComponent = document.querySelector('pearson-select'), select = selectComponent.shadowRoot.querySelector('select');
select.setAttribute('autofocus', true)
#
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="selectOne">I am a select box</label> <div class="gr-select-container"> <select class="gr-select" id="selectOne"> <option value="one">Option One</option> <option value="two">Option Two</option> </select> <svg focusable="false" class="icon-18" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#drop-down-18"></use> </svg> </div> <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>