Minimalistic dropdown webcomponent. After long search we couldn't find any cross platform and had to build our own inspired by the latest trends.


Regular select

Autocomplete Regular

Getting Started

To start building a new web component using Stencil, clone this repo to a new directory:

git clone revo-dropdown
cd revo-dropdown
git remote rm origin

and run:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Need help? Check out docs here.

Script tag

  • Put a script tag similar to this <script src=''></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc



Property Attribute Description Type Default
appendTo append-to Where to append element "body" \| "current" 'body'
autoClose auto-close Should dropdown autoclose on changeValue boolean true
dataId data-id Define object mapping for id/value string undefined
dataLabel data-label Define object mapping for labels string undefined
filter filter Filter criteria "contains" \| "start" 'contains'
hasFilter has-filter boolean true
placeholder placeholder Placeholder text string 'Select'
source -- Define object mapping for id/value any[] undefined
value value Selected value any undefined


Event Description Type
changeValue When value changed CustomEvent<{ val: any; originalEvent?: MouseEvent; }>
close Before element close, can be prevented CustomEvent<any>
open Before element open, can be prevented CustomEvent<any>


doChange(val: any, originalEvent?: MouseEvent) => Promise<void>

Change value


Type: Promise<void>

doClose() => Promise<void>

Close dropdown


Type: Promise<void>

doOpen() => Promise<void>

Open dropdown


Type: Promise<void>


Depends on


graph TD;
  revo-dropdown --> revo-list
  style revo-dropdown fill:#f9f,stroke:#333,stroke-width:4px