Quickstart

Install the package

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

Example

<script lang="ts">import Select from "svelte-select-kit";
</script>

<Select.Root label="Numbers">
	<Select.Input placeholder="Search something..." class="input" />
	<Select.ListBox let:open>
		{#if open}
			<Select.Item id="one">One</Select.Item>
			<Select.Item id="two">Two</Select.Item>
			<Select.Item id="three">Three</Select.Item>
			<Select.Item id="four">Four</Select.Item>
            <Select.NoResults>No results found</Select.NoResults>
		{/if}
	</Select.ListBox>
</Select.Root>

NOTE: We use @smui/common to forward events to 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.