SearchBar

A themed search input with a leading magnifier icon and an inline × clear button that appears when the field has content. The container uses Surface so it picks up the glass effect on Quartz automatically.

When to use: Any search or filter input at the top of a list or content section.

When not to use: General form fields — use FormField. Tag entry — use TagInput.

Import

import { SearchBar } from '@/components';

Usage

const [query, setQuery] = useState('');

<SearchBar
  value={query}
  onChangeText={setQuery}
  onClear={() => setQuery('')}
  placeholder="Search components…"
/>

Props

Prop	Type	Default	Description
value	string	—	Controlled value (required)
onChangeText	(text: string) => void	—	Change handler (required)
onClear	() => void	—	Called when × is tapped (required)
placeholder	string	'Search…'	Placeholder text
testID	string	—	For testing

With filtered results

const [query, setQuery] = useState('');
const results = items.filter(item =>
  item.title.toLowerCase().includes(query.toLowerCase())
);

<SearchBar
  value={query}
  onChangeText={setQuery}
  onClear={() => setQuery('')}
  placeholder="Search invoices…"
/>
<ListSection
  title={`${results.length} results`}
  items={results.map(r => ({
    label: r.title,
    description: r.date,
    rightElement: 'chevron',
    onPress: () => open(r.id),
  }))}
/>

Related

• ListSection — pairs naturally with SearchBar for filtered content
• Input — bare input atom