Components
SearchFilter
Debounced search box preset for filtering tables and lists by free text.
SearchFilter is a thin wrapper around SearchInput purpose-built for
filter bars: it reports every keystroke through onChange (so the input
stays responsive) while also exposing a separate onDebouncedChange you can
wire to an actual query or API call, avoiding a request per keystroke.
Example
Preview
- Ada LovelaceEnterprise
- Grace HopperPro
- Radia PerlmanPro
import { SearchFilter } from '@officina/ui';
import { useState } from 'react';
function CustomersFilterBar() {
const [value, setValue] = useState('');
return (
<SearchFilter
value={value}
onChange={setValue}
onDebouncedChange={(query) => console.log('fetch with', query)}
debounceMs={300}
placeholder="Search customers"
/>
);
}API
| Prop | Type | Default | Description |
|---|---|---|---|
| onChange* | (value: string) => void | — | Called on every keystroke with the raw input value. |
| value* | string | — | Current search text (controlled). |
| debounceMs | number | — | Debounce window in ms for `onDebouncedChange`. |
| onDebouncedChange | (value: string) => void | — | Called with the value after `debounceMs` of inactivity. |
| placeholder | string | — | Placeholder text for the search input. |