metonym / svelte-search

Accessible, customizable Svelte search component

svelte-search

Accessible, customizable Svelte search component.

This search component is composed using semantic form and input elements.

See svelte-typeahead for a search component with dropdown results.

Try it in the Svelte REPL.

---

Installation

Yarn

yarn add -D svelte-search

NPM

npm i -D svelte-search

pnpm

pnpm i -D svelte-search

Styling

This component is unstyled by design. Target the component using the [data-svelte-search] selector.

:global([data-svelte-search] input) {
  width: 100%;
  font-size: 1rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
  border: 1px solid #e0e0e0;
  border-radius: 0.25rem;
}

Usage

Two-way binding

<script>
  import Search from "svelte-search";

  let value = "";
</script>

<Search bind:value />

{#if value}
  <button on:click={() => (value = "")}>Clear "{value}"</button>
{/if}

on:submit

The input element is contained in a form. Use the forwarded submit event to obtain the value when pressing "Enter."

<Search bind:value on:submit={() => console.log("submit", value)} />

Label with placeholder text

$$restProps are forwarded to the input element.

<Search label="My label" placeholder="Placeholder text..." />

Label slot

<Search>
  <span slot="label" style="color: red;">Custom label</span>
</Search>

Visually hidden label

Set hideLabel to true to visually hide the label.

<Search hideLabel label="My label" placeholder="Placeholder text..." />

Focus (declarative)

Use the autofocus prop to declaratively focus the input.

<Search autofocus />

Focus (programmatic)

Bind the ref prop to programmatically focus the input.

<script>
  import Search from "svelte-search";

  let ref = null;
</script>

<Search bind:ref />

<button on:click={() => ref.focus()}>Focus</button>

Debounced input

Use the debounce prop to specify the debounce value in milliseconds.

<script>
  import Search from "svelte-search";

  let events = [];
</script>

<Search
  debounce={800}
  on:type={({ detail: value }) => (events = [...events, value])}
/>

<pre>{JSON.stringify(events, null, 2)}</pre>

API

$$restProps are forwarded to the input element.

Props

Prop name	Type	Default value
value	string	""
label	string	"Search"
hideLabel	boolean	false
debounce	number	0
ref	HTMLInputElement	null
id	string	"search" + Math.random().toString(36)
removeFormAriaAttributes	boolean	false
autofocus	boolean	false

Forwarded events

• on:input
• on:change
• on:submit
• on:focus
• on:blur
• on:keydown

Dispatched events

• on:type: fired when the the input value is updated
• on:clear: fired when clicking the "X" button to clear the input value

<Search
  on:type={(e) => {
    console.log("type", e.detail); // input value
  }}
  on:clear={() => {
    console.log("clear");
  }}
/>

TypeScript

Svelte version 3.31 or greater is required to use this component with TypeScript.

TypeScript definitions are located in the types folder.

Changelog

Changelog

License

MIT