f32aab6533
- @lion/button@0.3.5 - @lion/calendar@0.1.52 - @lion/checkbox-group@0.1.50 - @lion/checkbox@0.1.45 - @lion/choice-input@0.2.22 - @lion/field@0.1.42 - @lion/fieldset@0.1.44 - @lion/form-system@0.0.52 - @lion/form@0.1.49 - @lion/input-amount@0.1.45 - @lion/input-date@0.1.44 - @lion/input-datepicker@0.1.56 - @lion/input-email@0.1.44 - @lion/input-iban@0.1.45 - @lion/input@0.1.44 - @lion/option@0.1.4 - @lion/popup@0.2.32 - @lion/radio-group@0.1.50 - @lion/radio@0.1.45 - @lion/select-rich@0.1.8 - @lion/select@0.1.42 - @lion/textarea@0.1.47 - @lion/tooltip@0.2.32 |
||
|---|---|---|
| .. | ||
| src | ||
| stories | ||
| test | ||
| CHANGELOG.md | ||
| index.js | ||
| lion-select.js | ||
| package.json | ||
| README.md | ||
Select
lion-select component is a wrapper around the native select.
You cannot use interactive elements inside the options. Avoid very long names to facilitate the understandability and perceivability for screen reader users. Sets of options where each option name starts with the same word or phrase can also significantly degrade usability for keyboard and screen reader users.
Features
- catches and forwards the select events
- can be set to required or disabled
How to use
Installation
npm i --save @lion/select
import '@lion/select/lion-select.js';
Example
<lion-select
name="favoriteColor"
.errorValidators=${[['required']]}
>
<div slot="label">Favorite color</div>
<select slot="input">
<option selected hidden value>Please select</option>
<option value="red">Red</option>
<option value="hotpink">Hotpink</option>
<option value="teal">Teal</option>
</select>
</lion-select>
You can preselect an option by setting the property modelValue.
<lion-select name="favoriteColor" .modelValue="${'<value of option 2>'}">
...
</lion-select>