# Select

The Select component lets the user choose an option from an expandable list of values.

## Demo

{% demo 'A select', 'edsSelectDemo', demos.edsSelectDemo, component.brand %}

## 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple).

### Installation

To install the components, [go to the get started guide for developers](https://github.com/springernature/elements).

To use the Select component, enter the following command in your Terminal:

```bash
npm install @springernature/elements
```

### Styles

First, import the styles of the Form component:

```scss
@import '../path/to/@springernature/elements/components/eds-c-form';
```

Then, import the styles of the Select component into your `scss` file:

```scss
@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](https://github.com/springernature/elements/blob/main/components/eds-c-select/data/eds-c-select.schema.json).

## 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](https://springernature.slack.com/archives/CNBTFLBLP) Slack channel.
