{"id":14962512,"url":"https://github.com/snehalbaghel/select-kit","last_synced_at":"2025-10-13T17:39:11.681Z","repository":{"id":251796231,"uuid":"838471897","full_name":"snehalbaghel/select-kit","owner":"snehalbaghel","description":"A one-stop solution for all your select/combobox/autocomplete needs for Svelte","archived":false,"fork":false,"pushed_at":"2024-10-13T05:57:14.000Z","size":481,"stargazers_count":53,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-07T03:51:22.167Z","etag":null,"topics":["cmdk","combobox","command-menu","select","svelte","sveltejs"],"latest_commit_sha":null,"homepage":"https://select-kit.vercel.app","language":"Svelte","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/snehalbaghel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-05T17:56:05.000Z","updated_at":"2025-03-31T03:45:10.000Z","dependencies_parsed_at":"2025-02-10T01:32:13.848Z","dependency_job_id":"5ba631f9-f3fe-4132-b9ed-2182d1298887","html_url":"https://github.com/snehalbaghel/select-kit","commit_stats":null,"previous_names":["snehalbaghel/select-kit"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/snehalbaghel/select-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snehalbaghel%2Fselect-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snehalbaghel%2Fselect-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snehalbaghel%2Fselect-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snehalbaghel%2Fselect-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/snehalbaghel","download_url":"https://codeload.github.com/snehalbaghel/select-kit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snehalbaghel%2Fselect-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279016369,"owners_count":26085828,"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","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["cmdk","combobox","command-menu","select","svelte","sveltejs"],"created_at":"2024-09-24T13:29:54.080Z","updated_at":"2025-10-13T17:39:11.662Z","avatar_url":"https://github.com/snehalbaghel.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Select Kit\n\nThis library is a one-stop solution for building WAI-ARIA compliant navigation/command/select menus. The components provided are headless so they can be styled as per your requirement, they are also [composable](https://github.com/pacocoursey/cmdk/blob/main/ARCHITECTURE.md) in nature so its easy to use. Refer the various examples below to implement the variation you want to build.\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"./static/images/example.png\"/\u003e\n\u003c/p\u003e\n\n## Installation\n\n```bash\nnpm install svelte-select-kit\n```\n\n## Basic Structure of a Combobox\n\n- `Select.Root`: The root component which sets up label, context and the store:\n  - `Select.Input`: Combobox's input, keeps track of query\n  - `Select.Select`: Use this if you're building a select only component\n  - `Select.ListBox`: Root component of the items\n    - `Select.Item`: A single selectable item, you will have multiple of these\n    - `Select.Separator`: Just a div with role='separator'\n    - `Select.NoResults`: Rendered when there are no results found\n- `Select.Button`: A button to toggle the list-box\n\n## Stable Release TODOS:\n\n- [ ] Multiselect Support\n- [ ] Type Ahead Support for 'Select Only' combobox\n- [ ] Sort by score\n- [ ] Some API improvements\n\n## Examples\n\nFor full examples refer the [examples](/src/examples) folder in this repo\n\n\u003e **NOTE:** We use [@smui/common](https://www.npmjs.com/package/@smui/common) to forward events of our components, it works similarly to the the Svelte syntax apart from one important difference: for adding event modifiers the `|` should be replaced by `$` i.e. `on:click|preventDefault` becomes `on:click$preventDefault`. For information on this refer this [issue](https://github.com/sveltejs/svelte/issues/2837).\n\n### Basic Example\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport Select from 'svelte-select-kit';\n\u003c/script\u003e\n\n\u003cSelect.Root label=\"Numbers\"\u003e\n\t\u003cSelect.Input placeholder=\"Search something...\" class=\"input\" /\u003e\n\t\u003cSelect.ListBox let:open\u003e\n\t\t{#if open}\n\t\t\t\u003cSelect.NoResults\u003eNo results found\u003c/Select.NoResults\u003e\n\t\t\t\u003cSelect.Item onSelectItem={() =\u003e console.log('clicked one')} id=\"one\"\u003eOne\u003c/Select.Item\u003e\n\t\t\t\u003cSelect.Item onSelectItem={() =\u003e console.log('clicked two')} id=\"two\"\u003eTwo\u003c/Select.Item\u003e\n\t\t\t\u003cSelect.Item onSelectItem={() =\u003e console.log('clicked three')} id=\"three\"\u003eThree\u003c/Select.Item\u003e\n\t\t\t\u003cSelect.Item onSelectItem={() =\u003e console.log('clicked four')} id=\"four\"\u003eFour\u003c/Select.Item\u003e\n\t\t{/if}\n\t\u003c/Select.ListBox\u003e\n\u003c/Select.Root\u003e\n```\n\n### Disable Filtering\n\nListBox supports shouldFilter prop which will disable filtering, to access the input value to perform your own filtering you may bind to the input component's value prop.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n\timport Select from 'svelte-select-kit';\n\n\tlet value = '';\n\t// Add your logic here for filtering..\n\u003c/script\u003e\n\n\u003cSelect.Root label=\"Numbers\"\u003e\n\t\u003cSelect.Input bind:value placeholder=\"Search something...\" class=\"input\" /\u003e\n\t\u003cSelect.ListBox shouldFilter={false}\u003e...\u003c/Select.ListBox\u003e\n\u003c/Select.Root\u003e\n...\n```\n\n### With Chevron Button\n\n```svelte\n\u003c!-- \n\tBasic example with dropdown button\n --\u003e\n\u003cscript lang=\"ts\"\u003e\n\timport Select from '$lib/index.js';\n\u003c/script\u003e\n\n\u003cSelect.Root label=\"Numbers\"\u003e\n\t\u003cSelect.Input placeholder=\"Search something...\" class=\"input\" /\u003e\n\t\u003cSelect.Button let:open\u003e{open ? '⌃' : '⌄'}\u003c/Select.Button\u003e\n\t\u003cSelect.ListBox let:open\u003e\n\t\t{#if open}\n\t\t\t\u003cSelect.NoResults\u003eNo results found\u003c/Select.NoResults\u003e\n\t\t\t\u003cSelect.Item onSelectItem={() =\u003e console.log('clicked one')} id=\"one\"\u003eOne\u003c/Select.Item\u003e\n\t\t\t\u003cSelect.Item onSelectItem={() =\u003e console.log('clicked two')} id=\"two\"\u003eTwo\u003c/Select.Item\u003e\n\t\t\t\u003cSelect.Item onSelectItem={() =\u003e console.log('clicked three')} id=\"three\"\u003eThree\u003c/Select.Item\u003e\n\t\t\t\u003cSelect.Item onSelectItem={() =\u003e console.log('clicked four')} id=\"four\"\u003eFour\u003c/Select.Item\u003e\n\t\t{/if}\n\t\u003c/Select.ListBox\u003e\n\u003c/Select.Root\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnehalbaghel%2Fselect-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsnehalbaghel%2Fselect-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnehalbaghel%2Fselect-kit/lists"}