Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/snehalbaghel/select-kit
A one-stop solution for all your select/combobox/autocomplete needs for Svelte
https://github.com/snehalbaghel/select-kit
cmdk combobox command-menu select svelte sveltejs
Last synced: 25 days ago
JSON representation
A one-stop solution for all your select/combobox/autocomplete needs for Svelte
- Host: GitHub
- URL: https://github.com/snehalbaghel/select-kit
- Owner: snehalbaghel
- License: mit
- Created: 2024-08-05T17:56:05.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-08-17T08:56:33.000Z (3 months ago)
- Last Synced: 2024-09-29T10:50:38.760Z (about 1 month ago)
- Topics: cmdk, combobox, command-menu, select, svelte, sveltejs
- Language: Svelte
- Homepage: https://select-kit.vercel.app
- Size: 459 KB
- Stars: 41
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Select Kit
This 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.
## Installation
```bash
npm install svelte-select-kit
```
## Basic Structure of a Combobox
- `Select.Root`: The root component which sets up label, context and the store:
- `Select.Input`: Combobox's input, keeps track of query
- `Select.Select`: Use this if you're building a select only component
- `Select.ListBox`: Root component of the items
- `Select.Item`: A single selectable item, you will have multiple of these
- `Select.Separator`: Just a div with role='separator'
- `Select.NoResults`: Rendered when there are no results found
- `Select.Button`: A button to toggle the list-box
## Stable Release TODOS:
- [ ] Multiselect Support
- [ ] Type Ahead Support for 'Select Only' combobox
- [ ] Some API improvements
## Examples
For full examples refer the [examples](/src/examples) folder in this repo
> **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).
### Basic Example
```svelte
import Select from 'svelte-select-kit';
{#if open}
No results found
console.log('clicked one')} id="one">One
console.log('clicked two')} id="two">Two
console.log('clicked three')} id="three">Three
console.log('clicked four')} id="four">Four
{/if}
```
### Disable Filtering
ListBox 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.
```svelte
import Select from 'svelte-select-kit';
let value = '';
// Add your logic here for filtering..
...
...
```
### With Chevron Button
```svelte
import Select from '$lib/index.js';
{open ? '⌃' : '⌄'}
{#if open}
No results found
console.log('clicked one')} id="one">One
console.log('clicked two')} id="two">Two
console.log('clicked three')} id="three">Three
console.log('clicked four')} id="four">Four
{/if}
```