Combocore

The Combocore is a foundational combobox, serving as the base for further development or customization

Combocore

Multiple select

Multiple select with remote options

<label for="combocore">Select items</label>
<Combocore endpoint="/api/v1/autocomplete/combobox" bind:this={combocore}>
	<Combocore.Input id="combocore" placeholder="Choose a quote" />
	<Combocore.Listbox />
</Combocore>
selected items

Single select

Single select with remote options

<label for="combocore-2">Select items</label>
<Combocore endpoint="/api/v1/autocomplete/combobox" multiple={false} selectionToInput={true} deselect={false}>
	<Combocore.Input id="combocore-2" placeholder="Choose a quote" />
	<Combocore.Listbox />
</Combocore>

No Options

No options message

<label for="combocore-3">Select items</label>
<Combocore endpoint="/api/v1/autocomplete/combobox" multiple={false} selectionToInput={true} deselect={false}>
	<Combocore.Input id="combocore-3" placeholder="Choose a quote" />
	<Combocore.Listbox>
		{#snippet noOptions()}
			<h3>We did not find what you are looking for.</h3>
			<p>You can find more information <a href="https://example.com">here</a>.</p>
		{/snippet}
	</Combocore.Listbox>
</Combocore>