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