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.
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.
Style & Class
Explore styling and class customization for BitSearchBox, including component styles, custom classes, and detailed styles.
Component's Style & Class:
Styles & Classes:
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:
Validation
Demonstrating validation of BitSearchBox using data annotations.
Suggestion (AutoComplete)
Examples of BitSearchBox with suggestion list, including custom filtering, minimum trigger characters, and more.
SuggestItems
SearchValue:
SuggestFilterFunction
SearchValue:
MinSuggestTriggerChars(1)
SearchValue:
MaxSuggestCount equals(2)
SearchValue:
DebounceTime(2000)
SearchValue:
ItemsProvider
SearchValue:
RTL
Use the BitSearchBox component in right-to-left (RTL).
API
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. |
| IconName | string | Search | The icon name for the icon shown at the beginning of the search box. |
| 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. |
| 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. |
| SearchButtonIconName | string | ChromeBackMirrored | Custom icon name for the search button. |
| ShowSearchButton | bool | false | Whether to show the search button. |
| 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. |
| 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. |
| Underlined | bool | false | Whether or not the SearchBox 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 |
|---|---|---|---|
| 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. |
| 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. |
| InputContainer | string? | null | Custom CSS classes/styles for the input container of the BitSearchBox. |
| Focused | string? | null | Custom CSS classes/styles for the focus state of the BitSearchBox. |
| 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. |
- On this page