# Dropdown
The `auro-dropdown` component is a trigger and dropdown element combination intended to be used with dropdown content that is interactive. `auro-dropdown` is content agnostic and any valid HTML can be placed in either the trigger or the dropdown.
_Note: if the dropdown content in your implementation is not interactive (e.g. a tooltip) [auro-popover](http://auro.alaskaair.com/components/auro/popover) may better serve your needs._
## Dropdown Use Cases
The `auro-dropdown` element should be used in situations where users may:
* interact with an element to get clarification on content offering
* provide definition to iconic imagery
* when interactive help is required
## Getting Started
#### NPM Installation
```shell
$ npm i @aurodesignsystem/auro-formkit
```
### TypeScript Module Resolution
When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
```json
{
"compilerOptions": {
"moduleResolution": "bundler"
}
}
```
This configuration enables proper module resolution for the component's TypeScript files.
## Install from CDN
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
```html
```
## Formkit Development
### Filtering
Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
To only develop a single component, use the `--filter` flag:
```shell
npx turbo dev --filter=@aurodesignsystem/auro-input
```
## Custom Component Registration for Version Management
There are two key parts to every Auro component: the class and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
You can do this by importing only the component class and using the `register(name)` method with a unique name:
```js
// Import the class only
import { AuroDropdown } from '@aurodesignsystem/auro-formkit/auro-dropdown/class';
// Register with a custom name if desired
AuroDropdown.register('custom-dropdown');
```
This will create a new custom element `` that behaves exactly like ``, allowing both to coexist on the same page without interfering with each other.
Lorem ipsum solar
Dismiss Dropdown
Trigger
See code
```html
Lorem ipsum solar
Dismiss Dropdown
Trigger
```