Multi select alpine js

Multi-select using alpine model from : (multi-select)[ tailwindcomponents.com/component/multi-select ]

Share

/r/n <script nomodule src=https://www.creative-tim.com/"https:////cdn.jsdelivr.net//gh//alpinejs//alpine@v2.x.x//dist//alpine-ie11.min.js/" defer><\/script>\r\n\r\n <style>\r\n [x-cloak] {\r\n display: none;\r\n }\r\n <\/style>\r\n <select x-cloak id=\"select\">\r\n <option value=\"1\">Option 2<\/option>\r\n <option value=\"2\">Option 3<\/option>\r\n <option value=\"3\">Option 4<\/option>\r\n <option value=\"4\">Option 5<\/option>\r\n <\/select>\r\n\r\n <div x-data=\"dropdown()\" x-init=\"loadOptions()\" class=\"w-full md:w-1\/2 flex flex-col items-center h-64 mx-auto\">\r\n <form>\r\n <input name=\"values\" type=\"hidden\" x-bind:value=\"selectedValues()\">\r\n <div class=\"inline-block relative w-64\">\r\n <div class=\"flex flex-col items-center relative\">\r\n <div x-on:click=\"open\" class=\"w-full svelte-1l8159u\">\r\n <div class=\"my-2 p-1 flex border border-gray-200 bg-white rounded svelte-1l8159u\">\r\n <div class=\"flex flex-auto flex-wrap\">\r\n <template x-for=\"(option,index) in selected\" :key=\"options[option].value\">\r\n <div\r\n class=\"flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-teal-700 bg-teal-100 border border-teal-300 \">\r\n <div class=\"text-xs font-normal leading-none max-w-full flex-initial x-model=\"\r\n options[option]\" x-text=\"options[option].text\"><\/div>\r\n <div class=\"flex flex-auto flex-row-reverse\">\r\n <div x-on:click=\"remove(index,option)\">\r\n <svg class=\"fill-current h-6 w-6 \" role=\"button\" viewBox=\"0 0 20 20\">\r\n <path d=\"M14.348,14.849c-0.469,0.469-1.229,0.469-1.697,0L10,11.819l-2.651,3.029c-0.469,0.469-1.229,0.469-1.697,0\r\n c-0.469-0.469-0.469-1.229,0-1.697l2.758-3.15L5.651,6.849c-0.469-0.469-0.469-1.228,0-1.697s1.228-0.469,1.697,0L10,8.183\r\n l2.651-3.031c0.469-0.469,1.228-0.469,1.697,0s0.469,1.229,0,1.697l-2.758,3.152l2.758,3.15\r\n C14.817,13.62,14.817,14.38,14.348,14.849z\" \/>\r\n <\/svg>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/template>\r\n <div x-show=\"selected.length == 0\" class=\"flex-1\">\r\n <input placeholder=\"Select a option\"\r\n class=\"bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-gray-800\"\r\n x-bind:value=\"selectedValues()\"\r\n >\r\n <\/div>\r\n <\/div>\r\n <div\r\n class=\"text-gray-300 w-8 py-1 pl-2 pr-1 border-l flex items-center border-gray-200 svelte-1l8159u\">\r\n\r\n <button type=\"button\" x-show=\"isOpen() === true\" x-on:click=\"open\"\r\n class=\"cursor-pointer w-6 h-6 text-gray-600 outline-none focus:outline-none\">\r\n <svg version=\"1.1\" class=\"fill-current h-4 w-4\" viewBox=\"0 0 20 20\">\r\n <path d=\"M17.418,6.109c0.272-0.268,0.709-0.268,0.979,0s0.271,0.701,0,0.969l-7.908,7.83\r\n\tc-0.27,0.268-0.707,0.268-0.979,0l-7.908-7.83c-0.27-0.268-0.27-0.701,0-0.969c0.271-0.268,0.709-0.268,0.979,0L10,13.25\r\n\tL17.418,6.109z\" \/>\r\n <\/svg>\r\n\r\n <\/button>\r\n <button type=\"button\" x-show=\"isOpen() === false\" @click=\"close\"\r\n class=\"cursor-pointer w-6 h-6 text-gray-600 outline-none focus:outline-none\">\r\n <svg class=\"fill-current h-4 w-4\" viewBox=\"0 0 20 20\">\r\n <path d=\"M2.582,13.891c-0.272,0.268-0.709,0.268-0.979,0s-0.271-0.701,0-0.969l7.908-7.83\r\n\tc0.27-0.268,0.707-0.268,0.979,0l7.908,7.83c0.27,0.268,0.27,0.701,0,0.969c-0.271,0.268-0.709,0.268-0.978,0L10,6.75L2.582,13.891z\r\n\t\" \/>\r\n <\/svg>\r\n\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"w-full px-4\">\r\n <div x-show.transition.origin.top=\"isOpen()\"\r\n class=\"absolute shadow top-100 bg-white z-40 w-full lef-0 rounded max-h-select overflow-y-auto svelte-5uyqqj\"\r\n x-on:click.away=\"close\">\r\n <div class=\"flex flex-col w-full\">\r\n <template x-for=\"(option,index) in options\" :key=\"option\">\r\n <div>\r\n <div class=\"cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-teal-100\"\r\n @click=\"select(index,$event)\">\r\n <div x-bind:class=\"option.selected ? 'border-teal-600' : ''\"\r\n class=\"flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative\">\r\n <div class=\"w-full items-center flex\">\r\n <div class=\"mx-2 leading-6\" x-model=\"option\" x-text=\"option.text\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/template>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\t\t\t\r\n <button disabled class=\"flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded\" type=\"submit\">Test<\/button>\r\n <\/form>\r\n <\/div>\r\n \r\n\r\n <script>\r\n function dropdown() {\r\n return {\r\n options: [],\r\n selected: [],\r\n show: false,\r\n open() { this.show = true },\r\n close() { this.show = false },\r\n isOpen() { return this.show === true },\r\n select(index, event) {\r\n\r\n if (!this.options[index].selected) {\r\n\r\n this.options[index].selected = true;\r\n this.options[index].element = event.target;\r\n this.selected.push(index);\r\n\r\n } else {\r\n this.selected.splice(this.selected.lastIndexOf(index), 1);\r\n this.options[index].selected = false\r\n }\r\n },\r\n remove(index, option) {\r\n this.options[option].selected = false;\r\n this.selected.splice(index, 1);\r\n\r\n\r\n },\r\n loadOptions() {\r\n const options = document.getElementById('select').options;\r\n for (let i = 0; i < options.length; i++) {\r\n this.options.push({\r\n value: options[i].value,\r\n text: options[i].innerText,\r\n selected: options[i].getAttribute('selected') != null ? options[i].getAttribute('selected') : false\r\n });\r\n }\r\n\r\n\r\n },\r\n selectedValues(){\r\n return this.selected.map((option)=>{\r\n return this.options[option].value;\r\n })\r\n }\r\n }\r\n }\r\n <\/script>\r\n <\/div>","author_type":"App\\User","author_id":660,"collection_id":null,"fork_id":null,"votes":29,"score":"4.1","visits":52705,"popularity":5162,"slug":"multi-select-alpine-js","approved":1,"created_at":"2020-05-11T22:41:33.000000Z","updated_at":"2024-08-29T07:42:34.000000Z","downloads":1114,"code_views":19696,"center":true,"notified":1,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/unpkg.com\/tailwindcss@1.3.4\/dist\/tailwind.min.css","should_tweet":1,"media":[{"id":1763,"model_type":"App\\Component","model_id":418,"collection_name":"preview","name":"temp10968","file_name":"temp10968.png","mime_type":"image\/png","disk":"public","size":7402,"manipulations":[],"custom_properties":{"generated_conversions":{"thumb":true,"ogimage":true}},"responsive_images":{"media_library_original":{"urls":["temp10968___media_library_original_1280_957.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FGd0FmQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvU2l2VFBQQ2dBb0FLQUNnQW9BS0FDZ0FvQUtBQ2dBb0EvL1oiPgoJPC9pbWFnZT4KPC9zdmc+"}},"order_column":1730,"created_at":"2020-10-25T00:09:52.000000Z","updated_at":"2020-10-25T00:09:53.000000Z","conversions_disk":"public","uuid":"308d9bae-4b28-4acb-9897-fe55268ba8ac","generated_conversions":null,"original_url":"https:\/\/tailwindcomponents.com\/storage\/1763\/temp10968.png","preview_url":""}],"author":{"id":660,"name":"exatasmente","slug":"exatasmente","bio":null,"avatar":"https:\/\/avatars2.githubusercontent.com\/u\/22161417?v=4","header":null,"created_at":"2020-05-11T22:41:46.000000Z","updated_at":"2020-05-11T22:41:46.000000Z"},"tags":[{"id":15,"name":{"en":"Alpinejs"},"description":"Explore our components examples built with Tailwind & Alpinejs. Use the snippets to preview and copy\/paste the code.","meta_description":"Explore our components examples built with Tailwind & Alpinejs. Use the snippets to preview and copy\/paste the code.","slug":{"en":"alpinejs"},"type":null,"order_column":1,"created_at":"2021-02-16T17:13:07.000000Z","updated_at":"2023-10-27T13:23:58.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":418,"tag_id":15}},{"id":1,"name":{"en":"Buttons"},"description":"Choose from our large collection of ready-to-use buttons based on the most popular utility-first CSS framework.","meta_description":"Choose from our large collection of ready-to-use buttons based on the most popular utility-first CSS framework.","slug":{"en":"buttons"},"type":null,"order_column":2,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:05:44.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":418,"tag_id":1}},{"id":2,"name":{"en":"Forms"},"description":"Get started with our 100+ forms examples that are ready to be used in your Tailwind project. From Sign up, Sign in, to subscribe forms we got anything you need.","meta_description":"Get started with our 100+ forms examples that are ready to be used in your Tailwind project. From Sign up, Sign in, to subscribe forms we got anything you need.","slug":{"en":"forms"},"type":null,"order_column":5,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:08:37.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":418,"tag_id":2}},{"id":13,"name":{"en":"Selects"},"description":"Get inspired with this collection of free select examples that will help you get started easier with Tailwind. Use the snippets to preview and copy\/paste the code.","meta_description":"Get inspired with this collection of free select examples that will help you get started easier with Tailwind.","slug":{"en":"selects"},"type":null,"order_column":11,"created_at":"2020-09-29T11:58:58.000000Z","updated_at":"2022-08-01T16:18:54.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":418,"tag_id":13}}],"fork":null,"favorites":[{"id":3317,"name":"J\u00f4natas Fenske","slug":"jonatas-fenske","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/d02ae88e386278d46bdbd74d59ef66fa","header":null,"created_at":"2021-05-05T00:16:38.000000Z","updated_at":"2021-05-05T00:16:38.000000Z","pivot":{"component_id":418,"user_id":3317}},{"id":3558,"name":"whoisthisstud","slug":"whoisthisstud","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/44807533?v=4","header":null,"created_at":"2021-05-25T15:23:04.000000Z","updated_at":"2021-05-25T15:23:04.000000Z","pivot":{"component_id":418,"user_id":3558}},{"id":4019,"name":"amjeed-ay","slug":"amjeed-ay","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/72697280?v=4","header":null,"created_at":"2021-06-25T22:24:43.000000Z","updated_at":"2021-06-25T22:24:43.000000Z","pivot":{"component_id":418,"user_id":4019}},{"id":2899,"name":"Luis Dessens","slug":"luis-dessens","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/40bd7c2356945f86ffbbcbebe48798db","header":null,"created_at":"2021-03-30T19:58:49.000000Z","updated_at":"2021-03-30T19:58:49.000000Z","pivot":{"component_id":418,"user_id":2899}},{"id":3854,"name":"rafszul","slug":"rafszul","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1061573325988814849\/BTTrTKV0_normal.jpg","header":null,"created_at":"2021-06-13T22:59:26.000000Z","updated_at":"2021-06-13T22:59:26.000000Z","pivot":{"component_id":418,"user_id":3854}},{"id":4270,"name":"\u0415\u0432\u0433\u0435\u043d\u0438\u0439","slug":"evgenii","bio":null,"avatar":"\/storage\/avatars\/0gmZGngn09ydmioHncDtSYVsLlqdMMbe8PzywVct.jpg","header":null,"created_at":"2021-07-16T20:49:44.000000Z","updated_at":"2021-07-20T06:40:31.000000Z","pivot":{"component_id":418,"user_id":4270}},{"id":4037,"name":"puper","slug":"puper","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/5547922?v=4","header":null,"created_at":"2021-06-27T09:39:33.000000Z","updated_at":"2021-06-27T09:39:33.000000Z","pivot":{"component_id":418,"user_id":4037}},{"id":4476,"name":"george-randle","slug":"george-randle","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/65051227?v=4","header":null,"created_at":"2021-08-03T04:33:07.000000Z","updated_at":"2021-08-03T04:33:07.000000Z","pivot":{"component_id":418,"user_id":4476}},{"id":4568,"name":"JeffreytheCoder","slug":"jeffreythecoder","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/35394596?v=4","header":null,"created_at":"2021-08-11T04:40:17.000000Z","updated_at":"2021-08-11T04:40:17.000000Z","pivot":{"component_id":418,"user_id":4568}},{"id":4929,"name":"Hananxx","slug":"hananxx","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/58954229?v=4","header":null,"created_at":"2021-09-09T08:28:31.000000Z","updated_at":"2021-09-09T08:28:31.000000Z","pivot":{"component_id":418,"user_id":4929}},{"id":5453,"name":"Jason","slug":"jason","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/a8b0dbd6884a175f4ae67818583460b6","header":null,"created_at":"2021-10-16T14:55:18.000000Z","updated_at":"2021-10-16T14:55:18.000000Z","pivot":{"component_id":418,"user_id":5453}},{"id":6113,"name":"Gusta14Dev","slug":"gusta14dev","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/33584132?v=4","header":null,"created_at":"2021-12-10T18:33:16.000000Z","updated_at":"2021-12-10T18:33:16.000000Z","pivot":{"component_id":418,"user_id":6113}},{"id":6851,"name":"andraryanda","slug":"andraryanda","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/b466dc77c4a8545a0492a81530f17f44","header":null,"created_at":"2022-02-12T11:07:35.000000Z","updated_at":"2022-02-12T11:07:35.000000Z","pivot":{"component_id":418,"user_id":6851}},{"id":8280,"name":"NdekoCode","slug":"ndekocode","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/85836702?v=4","header":"\/storage\/headers\/3FqzEebO3eZi51EIVGBz9z4Z9OfkfxfX63Dtgga5.png","created_at":"2022-06-28T15:31:22.000000Z","updated_at":"2023-09-08T17:49:11.000000Z","pivot":{"component_id":418,"user_id":8280}},{"id":8545,"name":"Kryptanyte","slug":"kryptanyte","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/6505861?v=4","header":null,"created_at":"2022-07-31T06:13:05.000000Z","updated_at":"2022-07-31T06:13:05.000000Z","pivot":{"component_id":418,"user_id":8545}},{"id":8633,"name":"Stublic","slug":"stublic","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/64641745?v=4","header":null,"created_at":"2022-08-06T20:40:34.000000Z","updated_at":"2022-08-06T20:40:34.000000Z","pivot":{"component_id":418,"user_id":8633}},{"id":9041,"name":"stanig2106","slug":"stanig2106","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/65514998?v=4","header":null,"created_at":"2022-09-13T15:10:24.000000Z","updated_at":"2022-09-13T15:10:24.000000Z","pivot":{"component_id":418,"user_id":9041}},{"id":9485,"name":"vsavornin","slug":"vsavornin","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/22169346?v=4","header":null,"created_at":"2022-10-22T22:20:56.000000Z","updated_at":"2022-10-22T22:20:56.000000Z","pivot":{"component_id":418,"user_id":9485}},{"id":9406,"name":"alexandermitsyk","slug":"alexandermitsyk","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/15364563?v=4","header":null,"created_at":"2022-10-17T11:33:48.000000Z","updated_at":"2022-10-17T11:33:48.000000Z","pivot":{"component_id":418,"user_id":9406}},{"id":9833,"name":"StaffCollab","slug":"staffcollab","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/111918553?v=4","header":null,"created_at":"2022-11-22T21:01:04.000000Z","updated_at":"2022-11-22T21:01:04.000000Z","pivot":{"component_id":418,"user_id":9833}},{"id":10483,"name":"galih56","slug":"galih56","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/33045630?v=4","header":null,"created_at":"2023-01-12T13:52:19.000000Z","updated_at":"2023-01-12T13:52:19.000000Z","pivot":{"component_id":418,"user_id":10483}},{"id":17146,"name":"Vokirok","slug":"vokirok","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/49db19e61cecef771680f5d0a712b952","header":null,"created_at":"2024-02-24T01:00:35.000000Z","updated_at":"2024-02-24T01:00:35.000000Z","pivot":{"component_id":418,"user_id":17146}},{"id":20145,"name":"VanMeerbergenRenaud","slug":"vanmeerbergenrenaud","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/113695652?v=4","header":null,"created_at":"2024-08-14T11:37:49.000000Z","updated_at":"2024-08-14T11:37:49.000000Z","pivot":{"component_id":418,"user_id":20145}},{"id":1136,"name":"DESIGNfromWITHIN","slug":"designfromwithin","bio":null,"avatar":"https:\/\/avatars0.githubusercontent.com\/u\/725851?v=4","header":null,"created_at":"2020-09-14T10:25:43.000000Z","updated_at":"2020-09-14T10:25:43.000000Z","pivot":{"component_id":418,"user_id":1136}}]}" :edit="false"> Full screen Preview

exatasmente

1 component Profile On

Multi select alpine js

Community Rate

Related components