Debounce Input

A search input with an optional delay for value changes.

1,000 of 1,000 people

NameEmailDepartmentCountryStatus
Rasmus Lovelacerasmus.lovelace@example.comEngineeringUKInactive
Larry Eichlarry.eich@example.comSalesJPPending
Joe Goldbergjoe.goldberg@example.comSalesJPInactive
Donald Knuthdonald.knuth@example.comEngineeringINPending
Ken Wirthken.wirth@example.comProductINPending
Niklaus Stroustrupniklaus.stroustrup@example.comSupportDEPending
Erik Wirtherik.wirth@example.comProductINActive
Anders Hejlsberganders.hejlsberg@example.comProductUKActive
Bjarne Eichbjarne.eich@example.comSalesDEPending
Grace Berners-Leegrace.bernerslee@example.comEngineeringJPActive

Installation

pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/r/debounce-input.json

Usage

Use bind:value for controlled state or handle the debounced value with onChange.

usage.svelte

Notes

Updates are immediate by default. Set a positive delay, such as debounce={300}, to debounce them.

  • The visible input always responds immediately. With a positive delay, only value and onChange wait.
  • The clear button uses the same configured delay as typed input, keeping search and filter updates consistent.

Props

Debounce input props

NameTypeDefaultDescription
value
string "" The controlled value, updated after the debounce delay.
onChange
(value: string) => void undefined Called with the value after the debounce delay.
class
string undefined Optional classes for the root input group.
placeholder
string "Search..." Placeholder text for the input.
debounce
number 0 Delay in milliseconds before updating value and calling onChange. Use a positive value to debounce updates.