SearchResults

The answers to all your questions.

Example

Props

🕹️ standard props
noDataText
string
Text displayed when no data is found.
"Sorry, nothing found"
loadingText
string
Text displayed when loading.
"Searching for references ..."
results
Result<Data>[]
Array of results to display.
[]
loading
boolean
Controls the loading state.
false
footer
boolean
Controls the visibility of the footer.
true
activeKeyboard
boolean
Enables keyboard navigation.
false
class
{ container?: string, loading?: string, noData?: string, results?: string }
Custom CSS classes for styling.
{}
🎨 style props
--search-results-width
size
Width of the search results container
100%
--search-results-max-width
size
Maximum width of the search results container
--search-results-height
size
Height of the search results container
--search-results-max-height
size
Maximum height of the search results container
--search-results-background-color
color
Background color of the search results container
rgb(var(--global-color-background-100))
--search-results-margin
size
Margin around the search results container
--search-results-border-color
color
Border color of the search results container
rgb(var(--global-color-background-300))
--search-results-border-radius
size
Border radius of the search results container

Slots

footerSnippet

Slot for custom content to be placed in the footer.

Default content:

<span
  style:font-size=".875rem"
>
  <span 
    style:opacity=".5"
  >Search with</span> ❤️
</span>
      

loadingSnippet

Slot for custom content to be shown during the loading state.

Default content:

<span style:font-size=".875rem">{loadingText}</span>
      

noDataSnippet

Slot for custom content to be shown when no data is available.

Default content:

<span style:font-size='.875rem'>{noDataText}</span>

Events

onselect

Triggered when an element is selected.

Attribute	Type	Description
element	Element	The selected element.

onfocus

Triggered when an element gains focus.

Attribute	Type	Description
element	Element	The focused element.