SearchBar

A customizable search input with debouncing, loading states, and suggestions.

Installation


pnpm dlx bna-ui add searchbar

import { SearchBar, SearchBarWithSuggestions } from '@/components/ui/searchbar';

<SearchBar
  placeholder='Search for anything...'
  onSearch={(query) => console.log('Searching for:', query)}
  loading={false}
/>

The main search input component with debouncing and customization options.

Prop	Type	Default	Description
`loading`	`boolean`	`false`	Shows loading indicator when true.
`onSearch`	`(query: string) => void`	-	Callback fired when search is triggered (debounced).
`onClear`	`() => void`	-	Callback fired when clear button is pressed.
`showClearButton`	`boolean`	`true`	Whether to show the clear button when text is present.
`leftIcon`	`ReactNode`	Search icon	Custom left icon component.
`rightIcon`	`ReactNode`	-	Custom right icon component.
`containerStyle`	`ViewStyle \| ViewStyle[]`	-	Additional styles for the container.
`inputStyle`	`TextStyle \| TextStyle[]`	-	Additional styles for the text input.
`debounceMs`	`number`	`300`	Debounce delay in milliseconds for search callbacks.
`placeholder`	`string`	'Search...'	Placeholder text for the input.
`value`	`string`	-	Controlled value of the input.
`onChangeText`	`(text: string) => void`	-	Callback fired when text changes.

All other TextInputProps are also supported.

An enhanced search bar with dropdown suggestions functionality.

Prop	Type	Default	Description
`suggestions`	`string[]`	`[]`	Array of suggestion strings to display.
`onSuggestionPress`	`(suggestion: string) => void`	-	Callback fired when a suggestion is selected.
`maxSuggestions`	`number`	`5`	Maximum number of suggestions to display.
`showSuggestions`	`boolean`	`true`	Whether to show the suggestions dropdown.

All SearchBar props are also supported.

Debounced Search: Configurable debounce delay to prevent excessive API calls
Loading States: Built-in loading indicator support
Clear Functionality: Optional clear button with customizable behavior
Custom Icons: Support for custom left and right icons
Suggestions Dropdown: Enhanced variant with autocomplete suggestions
Flexible Styling: Comprehensive styling options for container and input
Controlled/Uncontrolled: Supports both controlled and uncontrolled usage patterns
Accessibility: Built with accessibility best practices

The SearchBar component follows accessibility guidelines:

On This Page