GlobalSearchTextField

TextField global friendly.

Example

Props

🕹️ standard props
searchButtonText
string
Text displayed on the search button
Search
searchDialogOpened
boolean
Controls if the search dialog is opened
false
transitionDuration
string
Duration of the transition for the dialog
.8s
class
{ container?: string, button?: string, shortcut?: string }
Optional custom class names for container, button, and shortcut elements
searcher
(params: { searchText: string }) => Promise<Result<Data>[] | undefined>
Function to perform the search request
() => Promise.resolve([])
🎨 style props
--global-search-text-field-ring-color
color
Ring color for the search text field
rgb(var(--global-color-contrast-200), .5)
--global-search-text-field-hover-ring-color
color
Ring color on hover for the search text field
rgb(var(--global-color-contrast-300))
--global-search-text-field-color
color
Text color inside the search text field
rgb(var(--global-color-contrast-600))
--global-search-text-field-width
size
Width of the search text field
100%
--global-search-text-field-max-width
size
Max width of the search text field
28rem
--global-search-text-field-height
size
Height of the search text field
2rem
--global-search-text-field-background-color
color
Background color of the search text field
rgb(var(--global-color-background-100))
--global-search-text-field-padding
size
Padding inside the search text field
0rem 0.75rem 0rem 0.5rem
--global-search-text-field-font-size
size
Font size for the search text field
.875rem
--global-search-text-field-border-radius
size
Border radius for the search text field
9999px

Slots

searchButtonSnippet

Slot for rendering the search button

Default content:

<button 
  onclick={toggleSearchDialog}
  class="search-like-button {clazz.button || ''}"
>
  {#if searchButtonIconSnippet}
    {@render searchButtonIconSnippet({ toggleSearchDialog })}
  {:else}
    <svg
      viewBox="0 0 20 20"
      fill="none"
      aria-hidden="true"
      class="search-icon"
      ><path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M12.01 12a4.25 4.25 0 1 0-6.02-6 4.25 4.25 0 0 0 6.02 6Zm0 0 3.24 3.25"
      />
    </svg>
  {/if}
  {#if searchButtonTextSnippet}
    {@render searchButtonTextSnippet()}
  {:else}
    {searchButtonText}
  {/if}
  {#if searchButtonShortcutSnippet}
    {@render searchButtonShortcutSnippet()}
  {:else}
    <kbd class="shortcut {clazz.shortcut || ''}"><kbd class="shortcut">⌘</kbd><kbd class="shortcut">K</kbd></kbd>
  {/if}
</button>
    

searchButtonIconSnippet

Slot for rendering the icon in the search button

Default content:

<svg
  viewBox="0 0 20 20"
  fill="none"
  aria-hidden="true"
  class="search-icon"
  ><path
    stroke-linecap="round"
    stroke-linejoin="round"
    d="M12.01 12a4.25 4.25 0 1 0-6.02-6 4.25 4.25 0 0 0 6.02 6Zm0 0 3.24 3.25"
  />
</svg>
    

searchButtonTextSnippet

Slot for rendering custom text inside the search button

Default content:

{searchButtonText}

searchButtonShortcutSnippet

Slot for rendering custom shortcut inside the search button

Default content:

<kbd class="shortcut {clazz.shortcut || ""}"><kbd class="shortcut">⌘</kbd><kbd class="shortcut">K</kbd></kbd>

searchBarSnippet

Slot for rendering the search bar

Default content:

<SearchBar
  bind:input={searchBarInput}
  bind:value={searchText}
  oninput={search}
  onkeydown={handleKeydown}
  onfocus={() => searchBarFocused = true}
  onblur={() => searchBarFocused = false}
></SearchBar>
    

searchResultsSnippet

Slot for rendering the search results

Default content:

<SearchResults
  --search-results-margin="-.5rem 0 0 0"
  --search-results-border-radius="0 0 .5rem .5rem"
  loading={searchLoading}
  results={searchResults}
  activeKeyboard={searchBarFocused}
  {onselect}
></SearchResults>
    

Events

onselect

Triggered when an element is selected.

Attribute	Type	Description
element	Element	The selected element.

ontoggleSearchDialog

Triggered when the search dialog is toggled

Attribute	Type	Description
opened	boolean	Indicates if the search dialog is opened