In a toolbar
Without a label, the placeholder names the box.
import { SearchField } from '@arbol-ai/ui';
<SearchField className="max-w-xs" placeholder="Search contacts" />Debounced
The list searches 300 ms after the last keystroke.
Searching for:
import { useState } from 'react';
import { SearchField } from '@arbol-ai/ui';
const DebouncedExample = () => {
const [search, setSearch] = useState('');
return (
<div className="grid max-w-xs gap-2">
<SearchField debounceMs={300} onChange={setSearch} placeholder="Search campaigns" value={search} />
<p className="text-muted-foreground text-sm">
Searching for: <output>{search === '' ? '—' : search}</output>
</p>
</div>
);
};
<DebouncedExample />Labelled
By name, phone or document.
import { SearchField } from '@arbol-ai/ui';
<SearchField className="max-w-xs" description="By name, phone or document." label="Find a patient" />Source
The examples above are src/components/search-field/search-field.examples.tsx, which the library’s tests render too.