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>