SearchBox

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

Usage

Basic
Basic examples of BitSearchBox including a default and a disabled state.



Underlined
Demonstrating the underlined style of BitSearchBox in both enabled and disabled states.


NoBorder
Demonstrating the no-border style of BitSearchBox in both enabled and disabled states.


Background
Demonstrating the background color kinds of BitSearchBox.




Icon
Examples of BitSearchBox with various icon configurations such as fixed icon, no animation, custom icon, and no icon.




Search Button
Showcasing BitSearchBox with a search button in various configurations, including custom button icon and disabled state.








Clear Button
Showcasing BitSearchBox with a clear button in various configurations, including custom button icon and hide this button.


Prefix & Suffix
Explore prefixing and suffixing features of the BitSearchbox.

https://

.com

https://
.com

Binding
Binding examples for BitSearchBox including two-way binding, OnChange, and OnSearch events.


Two-way





Immediate





OnChange


Search Value:



OnSearch (Search by Enter)


Search Value:
Suggestion (AutoComplete)
Examples of BitSearchBox with suggestion list, including custom filtering, minimum trigger characters, and more.


SuggestItems


SearchValue:



SuggestFilterFunction


SearchValue:



MinSuggestTriggerChars(1)


SearchValue:



MaxSuggestCount(2)


SearchValue:



DebounceTime(2000)


SearchValue:



ItemsProvider


SearchValue:



Modeless

Validation
Demonstrating validation of BitSearchBox using data annotations.

Text must be between 2 and 6 chars.
Color
Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.



































































Style & Class
Explore styling and class customization for BitSearchBox, including component styles, custom classes, and detailed styles.


Component's Style & Class:





Styles & Classes:


RTL
Use the BitSearchBox component in right-to-left (RTL).



API

BitSearchBox parameters
Name
Type
Default value
Description
Background BitColorKind? null The background color kind of the search box.
Classes BitSearchBoxClassStyles? null Custom CSS classes for different parts of the search box.
ClearButtonTemplate RenderFragment? null The custom template for clear button icon.
Color BitColor? null The general color of the search box, used for colored parts like icons.
DefaultValue string? null The default value of the text in the search box, 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 search box has value.
IconName string Search The icon name for the icon shown at the beginning of the search box.
InputMode BitInputMode? null Sets the inputmode html attribute of the input element.
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.
Modeless bool false Removes the overlay of suggest items callout.
NoBorder bool false Removes the default border of the search box.
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.
Prefix string? null Prefix text displayed before the search box input. This is not included in the value.
PrefixTemplate RenderFragment? null The custom template for the prefix of the search box.
SearchButtonIconName string ChromeBackMirrored Custom icon name for the search button.
SearchButtonTemplate RenderFragment? null The custom template for search button icon.
ShowSearchButton bool false Whether to show the search button.
Styles BitSearchBoxClassStyles? null Custom CSS styles for different parts of the search box.
Suffix string? null Suffix text displayed after the search box input. This is not included in the value.
SuffixTemplate RenderFragment? null The custom template for the suffix of the search box.
SuggestFilterFunction Func<string?, string?, bool>? null Custom search function to be used in place of the default search algorithm.
SuggestItems ICollection<string>? null The list of suggest items to display in the callout.
SuggestItemsProvider BitSearchBoxSuggestItemsProvider? null The item provider function providing suggest items.
SuggestItemTemplate RenderFragment<string>? null The custom template for rendering the suggest items of the search box.
Underlined bool false Whether or not the search box is underlined.
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.
BitTextInputBase parameters
Name
Type
Default value
Description
AutoComplete string? null Specifies the value of the autocomplete attribute of the input component.
AutoFocus bool false Determines if the text input is auto focused on first render.
DebounceTime int 0 The debounce time in milliseconds.
Immediate bool false Change the content of the input field when the user write text (based on 'oninput' HTML event).
ThrottleTime int 0 The throttle time in milliseconds.
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.
Name string? null Gets or sets the name of the element. Allows access by name from the associated form.
NoValidate bool false Disables the validation of the input.
OnChange EventCallback<TValue?> Callback for when the input value changes.
ReadOnly bool false Makes the input read-only.
Required bool false Makes the input required.
Value TValue? null Gets or sets the value of the input. This should be used with two-way binding.
BitInputBase public members
Name
Type
Default value
Description
InputElement ElementReference The ElementReference of the input element.
FocusAsync() () => ValueTask Gives focus to the input element.
FocusAsync(bool preventScroll) (bool preventScroll) => ValueTask Gives focus to the input element.
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.
Focused string? null Custom CSS classes/styles for the focus state of the search box.
InputContainer string? null Custom CSS classes/styles for the search box's input container.
IconWrapper string? null Custom CSS classes/styles for the search box's icon wrapper.
Icon string? null Custom CSS classes/styles for the search box's search icon.
PrefixContainer string? null Custom CSS classes/styles for the search box's search prefix container.
Prefix string? null Custom CSS classes/styles for the search box's search prefix.
Input string? null Custom CSS classes/styles for the search box's Input.
SuffixContainer string? null Custom CSS classes/styles for the search box's search suffix container.
Suffix string? null Custom CSS classes/styles for the search box's search suffix.
ClearButton string? null Custom CSS classes/styles for the search box's clear button.
ClearButtonIcon string? null Custom CSS classes/styles for the search box's clear button icon.
SearchButton string? null Custom CSS classes/styles for the search box's search button.
SearchButtonIcon string? null Custom CSS classes/styles for the search box's search button icon.
Overlay string? null Custom CSS classes/styles for the search box's overlay.
Callout string? null Custom CSS classes/styles for the search box's callout.
ScrollContainer string? null Custom CSS classes/styles for the search box's scroll container.
SuggestItemWrapper string? null Custom CSS classes/styles for the search box's suggest item wrapper.
SuggestItemButton string? null Custom CSS classes/styles for the search box's suggest item button.
SuggestItemText string? null Custom CSS classes/styles for the search box's suggest item text.
BitColorKind enum
Name
Value
Description
Primary 0 The primary color kind.
Secondary 1 The secondary color kind.
Tertiary 2 The tertiary color kind.
Transparent 3 The transparent color kind.
BitColor enum
Name
Value
Description
Primary 0 Info Primary general color.
Secondary 1 Secondary general color.
Tertiary 2 Tertiary general color.
Info 3 Info general color.
Success 4 Success general color.
Warning 5 Warning general color.
SevereWarning 6 SevereWarning general color.
Error 7 Error general color.
PrimaryBackground 8 Primary background color.
SecondaryBackground 9 Secondary background color.
TertiaryBackground 10 Tertiary background color.
PrimaryForeground 11 Primary foreground color.
SecondaryForeground 12 Secondary foreground color.
TertiaryForeground 13 Tertiary foreground color.
PrimaryBorder 14 Primary border color.
SecondaryBorder 15 Secondary border color.
TertiaryBorder 16 Tertiary border color.
BitInputMode enum
Name
Value
Description
None 0 The input expects text characters.
Text 1 Standard input keyboard for the user's current locale.
Decimal 2 Fractional numeric input keyboard containing the digits and decimal separator for the user's locale.
Numeric 3 Numeric input keyboard, but only requires the digits 0–9.
Tel 4 A telephone keypad input, including the digits 0–9, the asterisk (*), and the pound (#) key
Search 5 A virtual keyboard optimized for search input.
Email 6 A virtual keyboard optimized for entering email addresses.
Url 7 A keypad optimized for entering URLs.
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.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.
  • On this page