- bit BlazorUI
Home Docs

SearchBox

A search box (SearchBox) provides an input field for searching content within a site or app to find specific items.

Usage

Basic

IsUnderlined

Icon



Search Button
Style & Class


Visibility
Visible: [
]
Hidden: [ ]
Collapsed: [ ]
Binding


Validation
The text field length must be between 6 and 2 characters in length.
Suggest List
SearchValue:
SearchValue:

SearchValue:

SearchValue:

SearchValue:

SearchValue:
RTL


Implementation

BitSearchBox parameters
Name
Type
Default value
Description
Autocomplete string? null Specifies the value of the autocomplete attribute of the input component.
Classes BitSearchBoxClassStyles? null Custom CSS classes for different parts of the BitSearchBox.
DefaultValue string? null The default value of the text in the SearchBox, in the case of an uncontrolled component.
DisableAnimation bool false Whether or not to animate the search box icon on focus.
FixedIcon bool false Whether or not to make the icon be always visible (it hides by default when the search box is focused).
HideIcon bool false Whether or not the icon is visible.
HideClearButton bool false Whether to hide the clear button when the BitSearchBox has value.
IsUnderlined bool false Whether or not the SearchBox is underlined.
IconName string Search The icon name for the icon shown at the beginning of the search box.
SuggestItems ICollection<string>? null The list of suggest items to display in the callout.
SuggestItemProvider Func<string?, int, Task<ICollection<string>>>? null The function providing suggest items.
SuggestItemTemplate RenderFragment<string>? null The custom template for rendering the suggest items of the BitSearchBox.
MaxSuggestCount int 5 The maximum number of items or suggestions that will be displayed.
MinSuggestTriggerChars int 3 The minimum character requirement for doing a search in suggested items.
OnChange EventCallback<string?> Callback for when the input value changes.
OnClear EventCallback Callback executed when the user clears the search box by either clicking 'X' or hitting escape.
OnEscape EventCallback Callback executed when the user presses escape in the search box.
OnSearch EventCallback<string?> Callback executed when the user presses enter in the search box.
Placeholder string? null Placeholder for the search box.
Styles BitSearchBoxClassStyles? null Custom CSS styles for different parts of the BitSearchBox.
SuggestFilterFunction Func<string?, string?, bool>? null Custom search function to be used in place of the default search algorithm.
SuggestThrottleTime int 400 The delay, in milliseconds, applied to the search functionality.
SearchButtonIconName string ChromeBackMirrored Custom icon name for the search button.
ShowSearchButton bool false Whether to show the search button.
BitSearchBox public members
Name
Type
Default value
Description
InputElement ElementReference The ElementReference to the input element of the BitSearchBox.
FocusAsync ValueTask Gives focus to the input element of the BitSearchBox.
BitInputBase parameters
Name
Type
Default value
Description
DisplayName string? null Gets or sets the display name for this field.
InputHtmlAttributes IReadOnlyDictionary<string, object>? null Gets or sets a collection of additional attributes that will be applied to the created element.
Value TValue? null Gets or sets the value of the input. This should be used with two-way binding.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
BitSearchBoxClassStyles properties
Name
Type
Default value
Description
Root string? null Custom CSS classes/styles for the root element of the search box.
ClearButton string? null Custom CSS classes/styles for the search box's clear button.
ClearButtonContainer string? null Custom CSS classes/styles for the search box's clear button container.
ClearButtonIcon string? null Custom CSS classes/styles for the search box's clear button icon.
ClearButtonIconContainer string? null Custom CSS classes/styles for the search box's clear button icon container.
Input string? null Custom CSS classes/styles for the search box's Input.
SearchIcon string? null Custom CSS classes/styles for the search box search icon.
SearchIconContainer string? null Custom CSS classes/styles for the search box's search icon container.
BitVisibility enum
Name
Value
Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).
BitDir enum
Name
Value
Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.