SearchInput

Preview

Installation

pnpm add fancy-ui-svelte

import { SearchInput } from 'fancy-ui-svelte'

Usage

svelte

<script lang="ts">
  import { SearchInput } from 'fancy-ui-svelte';
</script>

<SearchInput />

Examples

Basic Usage

svelte

<script lang="ts">
	import { SearchInput } from "$lib/fancy-ui/search-input";

	let query = $state("");
</script>

<SearchInput bind:value={query} placeholder="Search components" onSearch={(v) => console.log(v)} />

Debounced

onSearch fires 300ms after typing settles instead of on every keystroke.

svelte

<script lang="ts">
	import { SearchInput } from "$lib/fancy-ui/search-input";

	let query = $state("");
	let lastSearch = $state("");
</script>

<div class="flex w-full max-w-sm flex-col gap-2">
	<SearchInput
		bind:value={query}
		placeholder="Type to filter…"
		debounceMs={300}
		onSearch={(v) => (lastSearch = v)}
	/>
	<p class="text-muted-foreground text-[12px]">
		Last search: {lastSearch || "—"}
	</p>
</div>

With FormField

svelte

<script lang="ts">
	// FormField ships from an earlier wave and supplies controlId,
	// aria-describedby and aria-invalid to SearchInput through context —
	// SearchInput itself needs no id or invalid prop here.
	import { FormField } from "$lib/fancy-ui/form-field";
	import { SearchInput } from "$lib/fancy-ui/search-input";

	let query = $state("");
</script>

<FormField label="Find a component" description="Matches by name or tag." class="w-full max-w-sm">
	<SearchInput bind:value={query} />
</FormField>

Props

Prop	Type	Default	Description
`value`	string	`""`	Current value; bindable
`onValueChange`	(value: string) => void	-	Called with the new value on every input event
`onSearch`	(value: string) => void	-	Fired on Enter, and on debounced settle when debounceMs is set
`placeholder`	string	`"Search"`	Shown while the field is empty
`debounceMs`	number	`0`	Delay before a settled value fires onSearch on its own; 0 disables debouncing
`disabled`	boolean	`false`	Blocks focus and typing; excluded from form submission
`readonly`	boolean	`false`	Blocks typing and clearing but stays focusable and is still submitted
`required`	boolean	`false`	Native required
`invalid`	boolean	`false`	Drives the error border and aria-invalid
`id`	string	-	Element id
`name`	string	-	Native name, read on form submission
`label`	string	-	Accessible name — for a control with no visible Label next to it
`clearable`	boolean	`true`	Renders a clear button once there is something to clear
`class`	string	-	Additional CSS classes, merged onto the field surface
`ref`	HTMLInputElement \| null	`null`	Bindable element reference