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.

<BitSearchBox Placeholder="Search" />
<BitSearchBox Placeholder="ReadOnly" ReadOnly />
<BitSearchBox Placeholder="Disabled" IsEnabled="false" />

Underlined

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

<BitSearchBox Placeholder="Search" Underlined />
<BitSearchBox Placeholder="Disabled" IsEnabled="false" Underlined />

NoBorder

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

<BitSearchBox Placeholder="Search" NoBorder/>
<BitSearchBox Placeholder="Disabled" IsEnabled="false" NoBorder/>

Background

Demonstrating the background color kinds of BitSearchBox.

<BitSearchBox Placeholder="Primary" Background="BitColorKind.Primary" NoBorder/>
<BitSearchBox Placeholder="Secondary" Background="BitColorKind.Secondary" NoBorder/>
<BitSearchBox Placeholder="Tertiary" Background="BitColorKind.Tertiary" NoBorder/>
<BitSearchBox Placeholder="Transparent" Background="BitColorKind.Transparent" NoBorder/>

Icon

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

<BitSearchBox Placeholder="FixedIcon" FixedIcon />
<BitSearchBox Placeholder="DisableAnimation" DisableAnimation />
<BitSearchBox Placeholder="Custom icon" IconName="@BitIconName.Filter" />
<BitSearchBox Placeholder="HideIcon" HideIcon />

Search Button

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

<BitSearchBox Placeholder="Search" ShowSearchButton />
<BitSearchBox Placeholder="SearchButtonIconName" ShowSearchButton SearchButtonIconName="PageListFilter" />
<BitSearchBox Placeholder="SearchButtonTemplate" ShowSearchButton>
    <SearchButtonTemplate>
        <BitIcon IconName="@BitIconName.SearchAndApps" />
    </SearchButtonTemplate>
</BitSearchBox>
<BitSearchBox Placeholder="Underlined" Underlined ShowSearchButton />
<BitSearchBox Placeholder="Disabled" IsEnabled="false" ShowSearchButton />
<BitSearchBox Placeholder="Disabled Underlined" IsEnabled="false" Underlined ShowSearchButton />

Clear Button

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

<BitSearchBox Placeholder="HideClearButton" HideClearButton />

<BitSearchBox Placeholder="ClearButtonTemplate">
    <ClearButtonTemplate>
        <BitIcon IconName="@BitIconName.RemoveFilter" />
    </ClearButtonTemplate>
</BitSearchBox>

Prefix & Suffix

Explore prefixing and suffixing features of the BitSearchbox.

https://

.com

https://

.com

<BitSearchBox Placeholder="Prefix" Prefix="https://" HideIcon />

<BitSearchBox Placeholder="Suffix" Suffix=".com" HideIcon />

<BitSearchBox Placeholder="Prefix & Suffix + Icon" Prefix="https://" Suffix=".com" />

<BitSearchBox Placeholder="Templates" HideIcon>
    <PrefixTemplate>
        <BitStack FitWidth Alignment="BitAlignment.Center" style="background:gray;padding:0 0.5rem;">
            <BitIcon IconName="@BitIconName.Calendar" Color="BitColor.PrimaryForeground" />
        </BitStack>
    </PrefixTemplate>
    <SuffixTemplate>
        <BitStack FitWidth Alignment="BitAlignment.Center" style="background:cadetblue;padding:0 0.5rem;">
            <BitIcon IconName="@BitIconName.ArrowTallUpRight" Color="BitColor.PrimaryForeground" />
        </BitStack>
    </SuffixTemplate>
</BitSearchBox>

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:

<BitSearchBox Placeholder="Search" @bind-Value="twoWaySearchValue" />
<BitTextField Placeholder="Search Value" @bind-Value="twoWaySearchValue" />


<BitSearchBox Placeholder="Search" Immediate @bind-Value="immediateTwoWaySearchValue" />
<BitTextField Placeholder="Search Value" Immediate @bind-Value="immediateTwoWaySearchValue" />


<BitSearchBox Placeholder="Search" Immediate
              OnChange="s => onChangeSearchValue = s"
              OnClear="() => onChangeSearchValue = string.Empty" />
<div>Search Value: @onChangeSearchValue</div>


<BitSearchBox Placeholder="Search" Immediate
              OnSearch="s => onSearchValue = s"
              OnClear="() => onSearchValue = string.Empty" />
<div>Search Value: @onSearchValue</div>
@code {
    private string twoWaySearchValue;
    private string onChangeSearchValue;
    private string onSearchValue;
}

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

<BitSearchBox @bind-Value="@searchValue"
              Immediate
              Placeholder="e.g. app"
              SuggestItems="GetSuggestedItems()" />


<BitSearchBox @bind-Value="@searchValueWithSuggestFilterFunction"
              Immediate
              Placeholder="e.g. app"
              SuggestItems="GetSuggestedItems()"
              SuggestFilterFunction="@SearchFunc" />


<BitSearchBox @bind-Value="@searchValueWithMinSearchLength"
              Immediate
              Placeholder="e.g. app"
              MinSuggestTriggerChars="1"
              SuggestItems="GetSuggestedItems()" />


<BitSearchBox @bind-Value="@searchValueWithMaxSuggestedItems"
              Immediate
              Placeholder="e.g. app"
              MaxSuggestCount="2"
              SuggestItems="GetSuggestedItems()" />


<BitSearchBox @bind-Value="@searchValueWithSearchDelay"
              Immediate
              DebounceTime="2000"
              Placeholder="e.g. app"
              SuggestItems="GetSuggestedItems()" />


<BitSearchBox @bind-Value="@searchValueWithItemsProvider"
              Immediate
              DebounceTime="300"
              Placeholder="e.g. pro"
              SuggestItemsProvider="LoadItems" />
<div>SearchValue: @searchValueWithItemsProvider</div>


<BitSearchBox Modeless
              Immediate
              DebounceTime="300"
              Placeholder="e.g. pro"
              SuggestItemsProvider="LoadItems" />
@code {
    private string searchValue;
    private string searchValueWithSuggestFilterFunction;
    private string searchValueWithSearchDelay;
    private string searchValueWithMinSearchLength;
    private string searchValueWithMaxSuggestedItems;
    private string searchValueWithItemsProvider;
    
    private List<string> GetSuggestedItems() =>
    [
            "Apple",
            "Red Apple",
            "Blue Apple",
            "Green Apple",
            "Banana",
            "Orange",
            "Grape",
            "Broccoli",
            "Carrot",
            "Lettuce"
    ];
    
    private Func<string, string, bool> SearchFunc = (string searchText, string itemText) =>
    {
        if (string.IsNullOrEmpty(searchText) || string.IsNullOrEmpty(itemText)) return false;
    
        return itemText.StartsWith(searchText, StringComparison.OrdinalIgnoreCase);
    };
    
    private async ValueTask<IEnumerable<string>> LoadItems(BitSearchBoxSuggestItemsProviderRequest request)
    {
        try
        {
            var query = new Dictionary<string, object?>()
            {
                { "$top", request.Take < 1 ? 5 : request.Take },
            };
    
            if (string.IsNullOrEmpty(request.SearchTerm) is false)
            {
                query.Add("$filter", $"contains(toupper(Name),'{request.SearchTerm.ToUpper()}')");
            }
    
            var url = NavManager.GetUriWithQueryParameters("api/Products/GetProducts", query);
    
            var data = await HttpClient.GetFromJsonAsync(url, AppJsonContext.Default.PagedResultProductDto, request.CancellationToken);
    
            return data!.Items!.Select(i => i.Name)!;
        }
        catch
        {
            return [];
        }
    }
}

Validation

Demonstrating validation of BitSearchBox using data annotations.

<EditForm Model="validationBoxModel">
    <DataAnnotationsValidator />
    <BitSearchBox Placeholder="Search" Immediate
                  DefaultValue="This is default value"
                  @bind-Value="validationBoxModel.Text" />
    <ValidationMessage For="() => validationBoxModel.Text" />
</EditForm>
@code {
    public class ValidationSearchBoxModel
    {
        [StringLength(6, MinimumLength = 2, ErrorMessage = "Text must be between 2 and 6 chars.")]
        public string Text { get; set; }
    }
    
    private ValidationSearchBoxModel validationBoxModel = new();
}

Color

Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.

<BitSearchBox Placeholder="Search" />
<BitSearchBox Placeholder="Disabled" IsEnabled="false" />

Style & Class

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

Component's Style & Class:

Styles & Classes:

<style>
    .custom-class {
        overflow: hidden;
        margin-inline: 1rem;
        border-radius: 1rem;
        border: 2px solid tomato;
    }

    .custom-class * {
        border: none;
    }


    .custom-root {
        margin-inline: 1rem;
    }

    .custom-input-container {
        height: 3rem;
        overflow: hidden;
        align-items: center;
        border-radius: 1.5rem;
        border-color: #13a3a375;
        background-color: #13a3a375;
    }

    .custom-focused .custom-input-container {
        border-width: 1px;
        border-color: #13a3a375;
    }

    .custom-clear:hover {
        background: transparent;
    }

    .custom-icon {
        color: darkslategrey;
    }

    .custom-icon-wrapper {
        width: 2rem;
        height: 2rem;
        border-radius: 1rem;
        margin-inline: 0.5rem;
        background-color: whitesmoke;
    }
</style>


<BitSearchBox Placeholder="Style" Style="box-shadow: dodgerblue 0 0 1rem; margin-inline: 1rem;" />

<BitSearchBox Placeholder="Class" Class="custom-class" />

<BitSearchBox Placeholder="Styles"
              Styles="@(new() { Root = "margin-inline: 1rem;",
                                Input = "padding: 0.5rem;",
                                Focused = "--focused-background: #b2b2b25a;",
                                InputContainer = "background: var(--focused-background);" })" />

<BitSearchBox FixedIcon
              Placeholder="Classes"
              Classes="@(new() { Root = "custom-root",
                                 Icon = "custom-icon",
                                 Focused = "custom-focused",
                                 ClearButton = "custom-clear",
                                 IconWrapper = "custom-icon-wrapper",
                                 InputContainer = "custom-input-container" })" />

RTL

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

<BitSearchBox Placeholder="جستجو" Dir="BitDir.Rtl" />
<BitSearchBox Placeholder="جستجو" Dir="BitDir.Rtl" ShowSearchButton />
<BitSearchBox Placeholder="جستجو" Dir="BitDir.Rtl" Underlined />

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

SearchBox

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

Usage

Basic

Underlined

NoBorder

Background

Icon

Search Button

Clear Button

Prefix & Suffix

Binding

Suggestion (AutoComplete)

Validation

Color

Style & Class

RTL

API

BitSearchBox parameters

Name

Type

Default value

Description

BitSearchBox public members

Name

Type

Default value

Description

BitTextInputBase parameters

Name

Type

Default value

Description

BitInputBase parameters

Name

Type

Default value

Description

BitInputBase public members

Name

Type

Default value

Description

BitComponentBase parameters

Name

Type

Default value

Description

BitComponentBase public members

Name

Type

Default value

Description

BitSearchBoxClassStyles properties

Name

Type

Default value

Description

BitColorKind enum

Name

Value

Description

BitColor enum

Name

Value

Description

BitInputMode enum

Name

Value

Description

BitVisibility enum

Name

Value

Description

BitDir enum

Name

Value

Description

Feedback

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