Select
The Select component is a form control that provides a menu of options to be selected.
Demo
When to use this component
When not to use this component
How it works
You should give an id attribute to enable it to be associated with a <label> for accessibility purposes, as well as a name attribute to represent the name of the associated data point submitted to the server.
Each menu option is defined by 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 create separators that add visual breaks between options.
Be aware of issues with the multiple attributes in the select element as support for keyboard navigation varies between browsers.
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.