SearchBox - 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


Style & Class


Visibility
Visible: [
]
Hidden: [ ]
Collapsed: [ ]
Controlled


Validation
The text field length must be between 6 and 2 characters in length.

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).
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.
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.
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.
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
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).