{"id":19247848,"url":"https://github.com/honatas/multi-select-webcomponent","last_synced_at":"2025-04-21T11:33:41.038Z","repository":{"id":57116341,"uuid":"363403793","full_name":"Honatas/multi-select-webcomponent","owner":"Honatas","description":"A fully styleable multiselect with no polyfills.","archived":false,"fork":false,"pushed_at":"2023-01-24T11:47:59.000Z","size":782,"stargazers_count":21,"open_issues_count":3,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-19T00:01:41.235Z","etag":null,"topics":["javascript","multi-select","typescript","webcomponents"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Honatas.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-01T12:24:26.000Z","updated_at":"2024-11-27T21:44:52.000Z","dependencies_parsed_at":"2023-02-13T20:50:46.521Z","dependency_job_id":null,"html_url":"https://github.com/Honatas/multi-select-webcomponent","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Honatas%2Fmulti-select-webcomponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Honatas%2Fmulti-select-webcomponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Honatas%2Fmulti-select-webcomponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Honatas%2Fmulti-select-webcomponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Honatas","download_url":"https://codeload.github.com/Honatas/multi-select-webcomponent/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250048103,"owners_count":21366176,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","multi-select","typescript","webcomponents"],"created_at":"2024-11-09T18:05:27.369Z","updated_at":"2025-04-21T11:33:40.766Z","avatar_url":"https://github.com/Honatas.png","language":"TypeScript","readme":"# Multi Select Webcomponent\n\n[![GitHub](https://img.shields.io/github/license/honatas/multi-select-webcomponent?style=plastic)](https://github.com/Honatas/multi-select-webcomponent \"View this project on GitHub\")\n[![npm](https://img.shields.io/npm/v/@honatas/multi-select-webcomponent?style=plastic)](https://npmjs.org/package/@honatas/multi-select-webcomponent \"View this project on npm\")\n[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg?style=plastic)](https://www.webcomponents.org/element/@honatas/multi-select-webcomponent)\n[![typescript](https://img.shields.io/badge/coded%20in-Typescript-blue?style=plastic)](https://www.typescriptlang.org/ \"Try Typescript\")\n[![coffee](https://img.shields.io/badge/buy%20me%20a-coffee-brown?style=plastic)](https://ko-fi.com/honatas \"Buy me a coffee\")\n\nA fully styleable multiselect with no polyfills.\n\n[Live demo ↗](https://jsfiddle.net/Honatas/k2fsy4Lc/29)\n\n## Install\n\nYou can get it from npm:\n\n    npm install @honatas/multi-select-webcomponent\n\nOr you can get it from a CDN:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@honatas/multi-select-webcomponent/dist/multi-select-webcomponent.min.js\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n```\n\nIf you use [Typescript](https://www.typescriptlang.org), add the definitions file to the includes section of your tsconfig.json:\n```javascript\n\"include\": [\n  \"node_modules/@honatas/multi-select-webcomponent/dist/multi-select-webcomponent.d.ts\",\n  ...\n],\n```\n\n## Usage\n\nAt first, you'll have to register the component with your application. I chose to leave this to you because this allows for avoiding naming conflicts with other WebComponents you may be using. So, in order to register the component, execute the following code during the initialization of your application (eg. at the first lines of code):\n\n```javascript\n  window.customElements.define('multi-select', MultiselectWebcomponent);\n```\n\nAfter that you can use the newly defined tag **multi-select** wherever you want on your html. The tag works the same as the **select** tag:\n\n```html\n  \u003cmulti-select id=\"planetIds\"\u003e\n    \u003coption id=\"1\"\u003eMercury\u003c/option\u003e\n    \u003coption id=\"2\"\u003eVenus\u003c/option\u003e\n    \u003coption id=\"3\"\u003eEarth\u003c/option\u003e\n  \u003c/multi-select\u003e\n```\n\n## Styling\n\nIn order to be fully styleable, this WebComponent ships with **no style at all!** If you just copy/paste the code above, your component will look ... well, unstylish.  \n\nTo add style to your component, you can either add attributes to your tag or create css classes:\n\nTag attribute             |CSS class                     | Target                                 |\n--------------------------|------------------------------|----------------------------------------|\n**selected**              |**.msw-selected**             | Selected items box                     |\n**selecteditem**          |**.msw-selecteditem**         | Selected item                          |\n**dropdown**              |**.msw-dropdown**             | Dropdown box                           |\n**dropdownitem**          |**.msw-dropdownitem**         | Dropdown item                          |\n**searchbox**             |**.msw-searchbox**            | Search input field                     |\n**clearbutton**           |**.msw-clearbutton**          | \"Clear Selection\" button               |\n**clearbuttonspan**       |**.msw-clearbuttonspan**      | \"Clear Selection\" button's inner span  |\n**selectallbutton**       |**.msw-selectallbutton**      | \"Select All\" button                    |\n**selectallbuttonspan**   |**.msw-selectallbuttonspan**  | \"Select All\" button's inner span       |\n  \nSo, if you want to add classes to every item that shows when you click the component, you can either add the attribute **dropdownitem** to your tag and populate it with css classes of your own or from whichever lib you are using, or create the **.msw-dropdownitem** class on your own css file. You can see a neatly styled example using [Bootstrap 5](https://getbootstrap.com) on the [Live demo](https://jsfiddle.net/Honatas/k2fsy4Lc/29).\n\nAlso, if you need to change the default titles for the buttons, you can add the following tag attributes:\n\nTag attribute             | Target                            |\n--------------------------|-----------------------------------|\n**clearbuttontitle**      | \"Clear Selection\" button's title  |\n**selectallbuttontitle**  | \"Select All\" button's title       |\n\n\n## Options\n\nYou may realize that as soon as you render the component, your **option** tags will be removed from the DOM. This is desired, since other elements are going to be rendered in substitution to them. However, internal control is still made using those tags, so they are kept int memory and you can access them through javascript. In the example above we create another option and add it to the component:\n\n```javascript\nconst pluto = document.createElement('option');\npluto.value = 9;\npluto.innerHTML = 'Pluto';\n\nconst msw = document.getElementById('planetIds');\nmsw.options.push(pluto);\nmsw.build();\n```\n\n## Properties\n\n**value: string[]**  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\nThe value property of this component is an array of strings containing the values of the selected Option elements.  \n\n**disabled: boolean**  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\nSets and reads the disabled property of this element.\n\n**options: HTMLOptionElement[]**  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\nArray of options. You can read or modify its contents at will, but changes will only apply after a call to **build()**.\n\n\n## Methods\n\n**build(): void**  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\nApplies changes to the element.\n\n**clear(): void**  \n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\nRemoves all options and calls **build()** immediately.\n\n\n## Older browsers warning\n\nThis WebComponent is created with pure Javascript, so no polyfills are being used. Do not use this component if the target browser is not listed in the compatibility list of the [WebComponents](https://www.webcomponents.org) website. At the time of writing of this documentation, all major browsers already have full support.\n\n## Contributions\n\nFeel free to open an issue or add a pull request. Anytime. Really, I mean it.  \n\nAlso, if you like my work, I'll let you know that I love [coffee](https://ko-fi.com/honatas).\n","funding_links":["https://ko-fi.com/honatas"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhonatas%2Fmulti-select-webcomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhonatas%2Fmulti-select-webcomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhonatas%2Fmulti-select-webcomponent/lists"}