SearchInput

Search field with a leading icon, clear button, and a debounced change callback.

SearchInput is a controlled text field with a leading search icon and a clear (×) button that appears once there is a value. Beyond the immediate onChange, it offers onDebouncedChange that fires after debounceMs (default 200ms) of inactivity — wire your actual query there to avoid firing a request on every keystroke. Disable the clear button with showClear={false}.

Example

Preview

import { SearchInput } from '@officina/ui';
import { useState } from 'react';

function Example() {
  const [query, setQuery] = useState('');
  return (
    <SearchInput
      value={query}
      onChange={setQuery}
      onDebouncedChange={(q) => runSearch(q)}
      placeholder="Search…"
    />
  );
}

API

Prop	Type	Default	Description
onChange*	(value: string) => void	—	Called on every keystroke with the new query.
value*	string	—	Current query string.
clearLabel	string	Clear	Accessible label for the clear button.
debounceMs	number	200	Debounce window for `onDebouncedChange`, in ms.
invalid	boolean	—	Mark the field invalid for validation styling.
onDebouncedChange	(value: string) => void	—	Called after `debounceMs` of inactivity — ideal for firing searches.
showClear	boolean	true	Show a clear (×) button when there is a value.

Example

API

On this page