Skip to main content

Select / Multi Select

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.

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>

NPM#

npm i @pearson-ux/icon--save
npm 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>

Structure#

Follow 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#

Required#

All attributes in this API are required.

AttributeTypeDefaultDescription
labelString"I am a select box"The label you want displayed with input .

Optional#

All attributes in this API are optional.

AttributeTypeDefaultDescription
multipleboolean'false'Changes the single select dropdown to a multi select combobox.
sizeStringunsetThe number of rows you want the multi select combobox to have
disabledbooleanfalseDetermines whether the input is disabled.
errorstring'error warning'Adds error styling and warning message.

Events#

The 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 Attributes#

You 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 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="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>