HxSearchBox

A search input component witch automatic suggestions, initial dropdown template and free-text queries support.

Basic usage #

Last selected item:
Last triggered text-query:

Suggestions only #

You can disable free-text query by setting AllowTextQuery="false". Only suggestions will be allowed.

Last selected item:

API

Parameters

Name Type Description
AllowTextQuery bool Indicates whether text-query mode is enabled (accepts free text in addition to suggested items).
Default is true.
ClearIcon IconBase Icon of the input, when text is written allowing the user to clear the text.
CssClass string Additional css classes for the dropdown.
DataProvider SearchBoxDataProviderDelegate<TItem> Method (delegate) which provides data of the suggestions.
DefaultContentTemplate RenderFragment Rendered when no input is entered (i.e. initial state).
Delay int? Debounce delay in miliseconds. Default is 300 ms.
DropdownOffset ValueTuple<int, int> Offset between the dropdown and the input.
Enabled bool Allows you to disable the input. Default is true.
InputCssClass string Additional CSS classes for the search box input.
InputGroupCssClass string Custom CSS class to render with input-group span.
InputGroupEndTemplate RenderFragment Input-group at the end of the input.
Hides the search icon when used!
InputGroupEndText string Input-group at the end of the input.
Hides the search icon when used!
InputGroupStartTemplate RenderFragment Input-group at the beginning of the input.
InputGroupStartText string Input-group at the beginning of the input.
InputSize InputSize? Input size of the input field.
ItemCssClass string Additional CSS classes for the items in the dropdown menu.
ItemIconSelector Func<TItem, IconBase> Selector to display icon from data item.
ItemSubtitleSelector Func<TItem, string> Selector to display item subtitle from data item.
ItemTemplate RenderFragment<TItem> Template for the item content.
ItemTitleSelector Func<TItem, string> Selector to display item title from data item.
Label string Label of the input field.
LabelType LabelType Label type of the input field.
MinimumLength int? Minimum lenght to call the data provider (display any results). Default is 2.
NotFoundTemplate RenderFragment Rendered when the DataProvider doesn't return any data.
OnItemSelected EventCallback<TItem> Occurs, when any of suggested items (other than plain text-query) is selected.
OnTextQueryTriggered EventCallback<string> Raised, when the enter key is pressed or when the text-query item is selected in the dropdown menu. (Does not trigger when AllowTextQuery is false.)
Placeholder string Placeholder text for the search input.
SearchIcon IconBase Icon of the input, when no text is written.
Settings SearchBoxSettings Set of settings to be applied to the component instance (overrides HxSearchBox.Defaults, overriden by individual parameters).
TextQuery string Text written by the user (input text).
TextQueryChanged EventCallback<string>
TextQueryItemTemplate RenderFragment<string> Template for the text-query item content (requires AllowTextQuery="true").

Static properties

Property Type Description
Defaults SearchBoxSettings Application-wide defaults for the HxSearchBox and derived components.

CSS Variables

Name Description Default
--hx-search-box-item-icon-margin Item icon margin. 0 .5rem 0 0
--hx-search-box-item-icon-font-size Item icon font-size. inherit
--hx-search-box-item-title-font-size Item title font-size. inherit
--hx-search-box-item-title-color Item title color. inherit
--hx-search-box-item-subtitle-font-size Item subtitle font-size. .75rem
--hx-search-box-item-subtitle-color Item subtitle color. var(--bs-secondary)
An unhandled error has occurred. Reload 🗙