Select
The Select component lets the user choose an option from an expandable list of values.
Demo
When to use this component
Use the Select component as a last resort where other options such as checkboxes or radios would not make sense.
When not to use this component
Use selects sparingly. Research shows that some people find them difficult to use.
How it works
You must give selects an id attribute to associate the input with its <label>.
You must also use a name attribute to represent the name of the associated value submitted to the server.
Define each menu option with an <option> element nested inside the <select>.
You can further nest <option> elements inside <optgroup> elements to create separate groups of options inside the dropdown. You can also include <hr> elements to add visual breaks between options. Be careful of making the list too complex.
Be aware of issues with multiple attributes in the select element as support for keyboard navigation varies between browsers. For more information, go to the Mozilla developer documentation on the multiple attribute.
Installation
To install the components, go to the get started guide for developers.
To use the Select component, enter the following command in your Terminal:
npm install @springernature/elementsStyles
First, import the styles of the Form component:
@import '../path/to/@springernature/elements/components/eds-c-form';Then, import the styles of the Select component into your scss file:
@import '../path/to/@springernature/elements/components/eds-c-select';Properties
For more detailed information on how to use the properties correctly, go to the select schema file.
Help improve this page
If you’ve got a question, idea or suggestion about how to improve this component or guidance,
post in the #ask-elements Slack channel.