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
FixedCalloutWidth
Validation
Demonstrating validation of BitSearchBox using data annotations.
Color
Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.
External Icons
Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the Icon and SearchButtonIcon parameters.
FontAwesome (Icon):
Bootstrap (Icon):
Search button with external icons (ShowSearchButton + SearchButtonIcon):
Clear button with external icons (ClearButtonIcon):
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. |
| ClearButtonIcon | BitIconInfo? | null | Gets or sets the icon to display on the clear button using custom CSS classes for external icon libraries. Takes precedence over ClearButtonIconName when both are set. |
| ClearButtonIconName | string? | Cancel | Gets or sets the name of the icon to display on the clear button from the built-in Fluent UI icons. |
| 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. |
| DisableAnimation | bool | false | Whether or not to animate the search box icon on focus. |
| FixedCalloutWidth | bool | false | Forces the suggest callout width to be always fixed at the component's width. |
| 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. |
| Icon | BitIconInfo? | null | Gets or sets the icon to display using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set. |
| IconName | string? | Search | Gets or sets the name of the icon to display from the built-in Fluent UI icons. |
| 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. |
| SearchButtonIcon | BitIconInfo? | null | Gets or sets the icon to display on the search button using custom CSS classes for external icon libraries. Takes precedence over SearchButtonIconName when both are set. |
| SearchButtonIconName | string? | ChromeBackMirrored | Gets or sets the name of the icon to display on the search button from the built-in Fluent UI icons. |
| 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 |
|---|---|---|---|
| DefaultValue | TValue? | null | The default value of the input to be used in uncontrolled mode (i.e. when the Value is not bound), typically used alongside the OnChange callback. |
| 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 | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | bool | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
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. |
BitIconInfo properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Name | string? | null | Gets or sets the name of the icon. |
| BaseClass | string? | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | string? | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
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. |
| 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.
- On this page