# Defaults (/themes/sdk/reference/search/defaults)

```ts
import { … } from '@poltura/theme-sdk/search';
```

## `HeaderSearch` [#headersearch]

The complete header search: the field as a combobox, suggestions before typing and live results after.

```ts
HeaderSearch(props: HeaderSearchProps): ReactElement
```

**Props:** [`HeaderSearchProps`](/themes/sdk/reference/search/types#headersearchprops)

<Tab value='Example'>

```tsx
import { HeaderSearch } from '@poltura/theme-sdk/search';

export function HeaderTools() {
  return <HeaderSearch variant="inline" placeholder="Search the store" />;
}
```

</Tab>
<Tab value='Source'>

```tsx title="source/header-search.tsx"
import { useState, type ReactElement } from 'react';
import { Search } from 'lucide-react';
import { useTranslations } from '@poltura/theme-sdk/i18n';
import { SearchCombobox, SearchDialog, type HeaderSearchProps } from '@poltura/theme-sdk/search';
import { Popover, PopoverContent, PopoverTrigger, cn } from '@poltura/theme-sdk/ui';

export function HeaderSearch({
  variant = 'inline',
  placeholder,
  className,
  attrs,
  ...options
}: HeaderSearchProps): ReactElement {
  const t = useTranslations('search');
  const [open, setOpen] = useState(false);
  const combobox = (floating: boolean) => (
    <SearchCombobox
      {...options}
      placeholder={placeholder}
      floating={floating}
      onNavigate={() => setOpen(false)}
    />
  );
  if (variant === 'inline') {
    return (
      <div
        {...attrs}
        className={cn(
          attrs?.className,
          className,
          'w-full max-w-md rounded-lg border border-border bg-background text-sm text-foreground',
        )}
      >
        {combobox(true)}
      </div>
    );
  }
  if (variant === 'popover') {
    return (
      <div {...attrs} className={cn(attrs?.className, className, 'inline-flex')}>
        <Popover open={open || options.preview === true} onOpenChange={setOpen}>
          <PopoverTrigger asChild>
            <button
              type='button'
              aria-label={t('ariaLabel')}
              className='tap-area relative inline-flex size-10 shrink-0 items-center justify-center rounded-md text-foreground transition-colors hover:bg-muted'
            >
              <Search aria-hidden='true' className='size-5' />
            </button>
          </PopoverTrigger>
          <PopoverContent
            align='end'
            collisionPadding={8}
            data-search-results=''
            className='w-80 max-w-[calc(100vw-1rem)] p-2 text-sm'
          >
            {combobox(false)}
          </PopoverContent>
        </Popover>
      </div>
    );
  }
  return (
    <div {...attrs} className={cn(attrs?.className, className, 'inline-flex')}>
      <SearchDialog label={t('ariaLabel')} open={open} onOpenChange={setOpen}>
        {combobox(false)}
      </SearchDialog>
    </div>
  );
}
```

</Tab>


**See also:** [`SearchCombobox`](/themes/sdk/reference/search/parts#searchcombobox), [`SearchDialog`](/themes/sdk/reference/search/parts#searchdialog)