SearchPanel

Provider-agnostic search panel shell with a controlled query field, normalized result sections, and slot-first anatomy.

Best for

search overlaysstorefront search drawersquick-result handoff panels

Import

import { SearchPanel } from "@enadhq/enad-react-sdk/client/storefront"

When to use it

Use SearchPanel when the page or overlay needs a search destination shell, not just a single autocomplete field. It works well in search overlays, quick-result drawers, and search-first navigation flows where the shell needs heading copy, normalized result sections, and a footer action.

If the experience only needs a compact suggestion field, use SearchAutocomplete instead.

Composition notes

SearchPanel stays provider-agnostic on purpose:

keep provider requests, shaping, and ranking outside the component
map backend records into SearchPanelSectionData and SearchPanelItem
let the panel focus on layout, accessibility, and result presentation

That separation keeps Unbxd-specific or provider-specific assumptions out of the public SDK surface.

Behavior and theming guidance

Treat SearchPanel as the body of the search surface, not the overlay controller. Let a parent shell own open-close state, focus traps, analytics, and route handoff.

Use the easy-path props when the default anatomy already fits. Drop to the compound slots when the shell needs custom heading rhythm, extra helper text, or a more branded footer.

Examples

Live examples you can edit directly in the sandbox.

2 examples

Normalized result sections

Map provider data outside the component, then pass the panel generic sections so the public API stays backend-agnostic.

Slot-first anatomy

Use the compound slots when the overlay needs custom heading rhythm or footer actions without moving provider logic into the component.

Slots

forminputbodyfooterheadersectionsummarytitlelistrooteyebrowheadingGroupitemdescriptioninputShellclearButtonsubmitButtonsectionHeadersectionTitlesectionActionitemLeadingitemBodyitemLabelitemDescriptionitemMetaitemTrailingempty

Component Sets

Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.

Props

Prop	Type	Default	Description
children	string	—	Composition-first panel content assembled from child slots such as `SearchPanel.Header`, `SearchPanel.Form`, `SearchPanel.Body`, `SearchPanel.Section`, and `SearchPanel.Footer`
eyebrow	string	—	Optional eyebrow rendered above the title
title	string	—	Heading content for the panel
description	string	—	Supporting copy rendered below the heading
summary	string	—	Optional summary row rendered above the result sections
query	string	—	Controlled query string for the search input
defaultQuery	string	—	Uncontrolled initial query value when the panel owns the field state
onQueryChange	string	—	Callback fired whenever the query changes
onSubmit	string	—	Callback fired when the search form submits
onClear	string	—	Optional callback fired after the built-in clear action resets the query
placeholder	string	"Search products, collections, and articles"	Placeholder text for the search input
autoFocus	boolean	false	Autofocus the search input when the panel mounts
loading	boolean	false	Loading state for the panel body when sections are not ready yet
sections	string	—	Normalized result sections prepared by provider or page logic outside the component
empty	string	—	Empty-state content rendered when no sections have items and the panel is not loading
footer	string	—	Optional footer content rendered below the result sections
labels	string	—	No description yet.
classNames	Partial<Record<SearchPanelSlot, string>>	—	No description yet. Slot keys forminputbodyfooterheadersectionsummarytitlelistrooteyebrowheadingGroupitemdescriptioninputShellclearButtonsubmitButtonsectionHeadersectionTitlesectionActionitemLeadingitemBodyitemLabelitemDescriptionitemMetaitemTrailingempty
className	string	—	No description yet.