svelte-search

Customizable search input component for Svelte.

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

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

---

Install

yarn add -D svelte-search
# OR
npm i -D svelte-search

Usage

Styling

Note: this component is unstyled by default. You can target the component using the [data-svelte-search] selector.

:global([data-svelte-search] input) {
  font-size: 1.5rem;
  padding: 1rem;
  border: 2px solid #e0e0e0;
}

Basic

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

  let value = "";
</script>

<Search bind:value />

{value}

Label + placeholder

$$restProps are forwarded to the input element.

<Search 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>
  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>
  let events = [];
</script>

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

{#each events as event}
  <div>{event}</div>
{/each}

Label slot

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

API

This component forwards $$restProps to the input element.

Props

Prop name	Value
autofocus	boolean (default: false)
id	string
label	string (default: "Search")
hideLabel	boolean (default: false)
name	string (default: "search")
value	string (default: "value")
debounce	boolean (default: false)
debounceValue	number (default: 250)
ref	HTMLInputElement (default: null)
removeFormAriaAttributes	boolean (default: 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.

Changelog

Changelog

License

MIT