Forms

Search field

A box for searching, with a quick way to start again.

Installation

npx sinaui add search-field

Copy src/lib/ui/SearchField.svelte, Input.svelte, InputButton.svelte, Icon.svelte and tokens.css. No other dependencies.

For choosing from a list of options while typing, use a Combobox.

Examples

Filtering a list

The clear button appears once there's text. Escape clears too.

Search the catalog

The Canon of Medicine
Book of Optics
Al-Jabr
Tabula Rogeriana
Book of Ingenious Devices
Kitāb al-Taṣrīf

<script lang="ts">
	import SearchField from '#lib/ui/SearchField.svelte';

	const titles = [
		'The Canon of Medicine',
		'Book of Optics',
		'Al-Jabr',
		'Tabula Rogeriana',
		'Book of Ingenious Devices',
		'Kitāb al-Taṣrīf'
	];
	let query = $state('');
	const found = $derived(
		titles.filter((t) => t.toLowerCase().includes(query.trim().toLowerCase()))
	);
</script>

<div class="stack">
	<SearchField label="Search the catalog" bind:value={query} placeholder="Title or author" />
	<ul>
		{#each found as t (t)}<li>{t}</li>{:else}<li class="none">Nothing matches “{query}”.</li>{/each}
	</ul>
</div>

<style>
	.stack {
		display: grid;
		gap: 0.75rem;
		inline-size: min(100%, 24rem);
	}
	ul {
		margin: 0;
		padding-inline-start: 1.25rem;
	}
	.none {
		list-style: none;
		margin-inline-start: -1.25rem;
		color: var(--ui-muted);
	}
</style>

Props

Prop	Type	Default
`label`	`string` (required)
`value`	`string`, bindable	`''`
`onsearch`	`(query) => void`: on Enter
`hint`	`string`

Accessibility

A search box: screen readers announce it as one, and phones show a Search key.
The clear button is named and only reachable once there's something to clear; clearing returns focus to the box.
Escape clears; with nothing to clear, it's left for a surrounding dialog to close.