What it does
SearchBar wraps a native input with optional leadingSlot (for example a search icon). SearchSuggestionList renders grouped rows as buttons for pointer and keyboard focus.
Neither component fetches data or owns navigation—you control value, filtering, and routing.
Composition and API
Keep filtering logic in the parent or a small hook. Cap result counts for performance on large indexes.
Use consistent ids for list items so selection handlers stay stable.
Common use cases
- Documentation or marketing site search over static routes.
- Filter narrow lists in settings or admin tables.
- Prototype command palettes before adding keyboard shortcuts.
- Search-as-you-type with your own ranking or API.
Accessibility
Provide a visible label or aria-label on SearchBar. For inline suggestion lists, ensure focus order matches user expectations when combining with dialogs.
This preview exposes a single h1 in the hero.
Next.js integration notes
Import from @zentauri-ui/zentauri-components/ui/search. Rebuild the components package after API changes so types and bundles stay in sync.
Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.
FAQ
Does SearchBar work with the Next.js App Router?
Yes. Use it inside a client component when you need useState for the value; keep surrounding layout in server components if you prefer.
Is a modal required?
No. SearchBar and SearchSuggestionList are presentational. You can render them inline on a page or wrap them in your own dialog when you need one.
How do I connect SearchSuggestionList to data?
Filter your items in the parent, map them to { id, label, description?, group? }, and pass them to SearchSuggestionList with an onSelect handler.