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.

Attribute	Type	Default	Description
`label`	`String`	"I am a select box"	The label you want displayed with input .

Optional#

All 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.

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>