diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
index 7dfe510d4c..abde090255 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor
@@ -12,12 +12,50 @@
     var searchBoxClearIconCss = BitIconInfo.From(SearchBoxClearIcon, SearchBoxClearIconName ?? "Cancel")?.GetCssClasses();
     var comboBoxAddButtonIconCss = BitIconInfo.From(ComboBoxAddButtonIcon, ComboBoxAddButtonIconName ?? "Add")?.GetCssClasses();
     var itemCheckIconCss = GetItemCheckIconCss();
+
+    RenderFragment emptyContent =
+        @<div style="@Styles?.EmptyContent" class="bit-drp-emp @Classes?.EmptyContent">
+            @if (HasSearchText && (NoResultsTemplate is not null || NoResultsText.HasValue()))
+            {
+                @if (NoResultsTemplate is not null)
+                {
+                    @NoResultsTemplate
+                }
+                else
+                {
+                    @NoResultsText
+                }
+            }
+            else if (EmptyTemplate is not null)
+            {
+                @EmptyTemplate
+            }
+            else
+            {
+                @(EmptyText ?? (HasSearchText ? "No results found" : "No items found"))
+            }
+        </div>;
+
+    RenderFragment loadingContent =
+        @<div style="@Styles?.LoadingContainer" class="bit-drp-ldc @Classes?.LoadingContainer" role="status" aria-live="polite">
+            @if (LoadingTemplate is not null)
+            {
+                @LoadingTemplate
+            }
+            else
+            {
+                <div style="@Styles?.Spinner" class="bit-drp-spn @Classes?.Spinner"></div>
+                <span style="@Styles?.LoadingText" class="@Classes?.LoadingText">@(LoadingText ?? "Loading...")</span>
+            }
+        </div>;
 }
 
-@if (Virtualize && (Options ?? ChildContent) is not null)
+@if ((Virtualize || IsLoading) && (Options ?? ChildContent) is not null)
 {
-    @* In virtualize mode the items have to be rendered from the (registered) Items collection, so the
-       options only register themselves here without rendering their items in place. *@
+    @* In virtualize mode the items have to be rendered from the (registered) Items collection, and while
+       loading the callout shows the loading content instead of them, so the options only register
+       themselves here without rendering their items in place. Keeping them mounted (rather than dropping
+       them from the tree) preserves both the registration and the markup order of the items. *@
     <CascadingValue Value="this" IsFixed="true">
         <div style="display:none" hidden>@(Options ?? ChildContent)</div>
     </CascadingValue>
@@ -28,7 +66,7 @@
      style="@StyleBuilder.Value"
      class="@ClassBuilder.Value"
      dir="@Dir?.ToString().ToLower()"
-     aria-owns="@(IsOpen? _calloutId : null)">
+     aria-owns="@(IsOpen? _scrollContainerId : null)">
     @if (LabelTemplate is not null)
     {
         <label id="@_labelId">
@@ -42,7 +80,9 @@
         </label>
     }
 
-    <div @onclick="HandleOnClick"
+    <div @ref="_dropdownWrapperRef"
+         @onclick="HandleOnClick"
+         @onkeydown="HandleOnTriggerKeyDown"
          title="@Title"
          role="combobox"
          id="@_dropdownId"
@@ -51,10 +91,12 @@
          tabindex=@(IsEnabled ? 0 : -1)
          aria-haspopup="listbox"
          aria-required="@Required"
+         aria-readonly="@(ReadOnly ? "true" : null)"
+         aria-invalid="@(ValueInvalid is true ? "true" : null)"
          aria-disabled="@(IsEnabled is false)"
          aria-expanded=@(IsOpen ? "true" : "false")
          aria-labelledby="@GetDropdownAriaLabelledby()"
-         aria-controls="@(IsOpen? _calloutId : null)">
+         aria-controls="@(IsOpen? _scrollContainerId : null)">
 
         @if (PrefixTemplate is not null)
         {
@@ -69,20 +111,37 @@
             </span>
         }
 
+        @* No live region here: this element names the combobox through aria-labelledby, so a screen
+           reader reads the new selection when the focus returns to the trigger. Announcing it on every
+           render would repeat the whole selection after each keystroke typed into the combo input. *@
         <span id="@_dropdownTextContainerId"
               style="@Styles?.TextContainer"
-              class="bit-drp-tcn @Classes?.TextContainer"
-              aria-live="polite"
-              aria-atomic="true"
-              aria-invalid="false">
+              class="bit-drp-tcn @Classes?.TextContainer">
 
             @if (Chips)
             {
-                @foreach (var item in _selectedItems)
+                @foreach (var item in _selectedItems.Take(GetDisplayedItemsCount()))
                 {
                     <span style="@Styles?.Chips" class="bit-drp-chp @Classes?.Chips">
                         @GetText(item)
-                        <i style="@Styles?.ChipsRemoveIcon" class="@chipsRemoveIconCss @Classes?.ChipsRemoveIcon" @onclick="() => HandleOnClickUnselectItem(item)" @onclick:stopPropagation />
+                        @if (IsEnabled && ReadOnly is false)
+                        {
+                            @* A button so the chip can be removed with the keyboard and is announced as an action. *@
+                            <button @onclick="() => HandleOnClickUnselectItem(item)" @onclick:stopPropagation
+                                    type="button"
+                                    style="@Styles?.ChipsRemoveButton"
+                                    class="bit-drp-crb @Classes?.ChipsRemoveButton"
+                                    aria-label="@($"Remove {GetText(item)}")">
+                                <i aria-hidden="true" style="@Styles?.ChipsRemoveIcon" class="@chipsRemoveIconCss @Classes?.ChipsRemoveIcon" />
+                            </button>
+                        }
+                    </span>
+                }
+
+                @if (GetOverflowItemsCount() > 0)
+                {
+                    <span style="@Styles?.OverflowChip" class="bit-drp-chp bit-drp-ovf @Classes?.OverflowChip">
+                        @GetOverflowText()
                     </span>
                 }
             }
@@ -104,12 +163,16 @@
                        @onkeydown="@HandleOnKeyDown"
                        @oninput="@HandleOnComboInput"
                        @onchange="@HandleOnComboChange"
+                       @onfocusin="HandleComboInputFocusIn"
+                       @onfocusout="HandleComboInputFocusOut"
                        style="@Styles?.ComboBoxInput"
                        class="bit-drp-inp @Classes?.ComboBoxInput"
                        type="text"
-                       role="combobox"
                        value="@_searchText"
+                       readonly="@ReadOnly"
                        aria-label="@AriaLabel"
+                       aria-autocomplete="list"
+                       aria-controls="@(IsOpen ? _scrollContainerId : null)"
                        placeholder="@(_selectedItems.Count > 0 ? "" : Placeholder)"
                        autocomplete="@BitAutoCompleteValue.NewPassword"
                        disabled="@(IsEnabled is false)" />
@@ -127,18 +190,25 @@
             }
         </span>
 
-        @if (IsEnabled && ShowClearButton && _selectedItems.Count > 0)
+        @if (IsEnabled && ReadOnly is false && ShowClearButton && _selectedItems.Count > 0)
         {
-            <button @onclick="HandleOnClearClick" @onclick:stopPropagation
+            @* The keydown is stopped here so activating this button with the keyboard cannot
+               reach the trigger's keydown handler and toggle the callout as well. *@
+            <button @onclick="HandleOnClearClick" @onclick:stopPropagation @onkeydown:stopPropagation
                     type="button"
+                    aria-label="Clear selection"
                     style="@Styles?.ClearButton"
                     class="bit-drp-icn bit-drp-clr @Classes?.ClearButton">
-                <i class="@clearButtonIconCss" />
+                <i aria-hidden="true" class="@clearButtonIconCss" />
             </button>
         }
 
         <span class="bit-drp-icn">
-            @if (CaretDownTemplate is not null)
+            @if (IsLoading)
+            {
+                <div aria-hidden="true" style="@Styles?.Spinner" class="bit-drp-spn @Classes?.Spinner"></div>
+            }
+            else if (CaretDownTemplate is not null)
             {
                 @CaretDownTemplate
             }
@@ -163,7 +233,8 @@
             </span>
         }
     </div>
-    <select @attributes="InputHtmlAttributes" class="bit-input-hidden" multiple>
+    @* Mirrors the selection into a native control so the value takes part in a plain HTML form post. *@
+    <select @attributes="InputHtmlAttributes" class="bit-input-hidden" multiple="@MultiSelect">
         @foreach (var item in _selectedItems)
         {
             <option value="@GetValue(item)" selected>@GetText(item)</option>
@@ -176,12 +247,14 @@
      id="@_overlayId"
      class="bit-drp-ovl @Classes?.Overlay"></div>
 
-<div id="@_calloutId"
+@* The listbox role lives on the scroll container, not here: the search box, the select all row, the
+   responsive panel header and the header/footer templates are not options and must not be children
+   of the listbox. *@
+<div @onkeydown="HandleOnCalloutKeyDown"
+     id="@_calloutId"
      tabindex="0"
-     role="listbox"
      style="@Styles?.Callout"
-     class="@GetCalloutCssClasses()"
-     aria-labelledby="@_labelId">
+     class="@GetCalloutCssClasses()">
 
     @if (Responsive)
     {
@@ -263,49 +336,98 @@
     {
         <div style="@Styles?.ResponsiveComboInputContainer"
              class="bit-drp-cbi @Classes?.ResponsiveComboInputContainer">
-            <input @ref="_comboBoxInputResponsiveRef" @onkeydown="@((k) => HandleOnKeyDown(k))" @oninput="@HandleOnComboInput" @onchange="@HandleOnComboChange"
+            <input @ref="_comboBoxInputResponsiveRef" @onkeydown="@((k) => HandleOnKeyDown(k))" @oninput="@HandleOnComboInput" @onchange="@HandleOnComboChange" @onfocusin="HandleComboInputFocusIn" @onfocusout="HandleComboInputFocusOut"
                    style="@Styles?.ComboBoxInput"
                    class="bit-drp-icb @Classes?.ComboBoxInput"
                    type="text"
-                   role="combobox"
                    value="@_searchText"
+                   readonly="@ReadOnly"
                    aria-label="@AriaLabel"
+                   aria-autocomplete="list"
+                   aria-controls="@_scrollContainerId"
                    placeholder="@Placeholder"
                    autocomplete="@BitAutoCompleteValue.NewPassword"
                    disabled="@(IsEnabled is false)" />
 
             <button @onclick="HandleOnAddItemComboClick" @onclick:stopPropagation
                     type="button"
+                    aria-label="Add"
                     style="@Styles?.ResponsiveComboAddButton"
                     class="bit-drp-icn bit-drp-cai @Classes?.ResponsiveComboAddButton">
-                <i class="@comboBoxAddButtonIconCss" />
+                <i aria-hidden="true" class="@comboBoxAddButtonIconCss" />
+            </button>
+        </div>
+    }
+
+    @if (MultiSelect && ShowSelectAll && ItemsProvider is null && IsLoading is false)
+    {
+        var (allSelected, anySelected) = GetSelectAllState();
+        var selectAllClasses = "bit-drp-sac bit-drp-iwr" +
+                               (allSelected ? " bit-drp-chd" : string.Empty) +
+                               (anySelected && allSelected is false ? " bit-drp-sai" : string.Empty) +
+                               (IsEnabled && ReadOnly is false ? string.Empty : " bit-drp-ids");
+        var selectAllAriaChecked = allSelected ? "true" : anySelected ? "mixed" : "false";
+        <div style="@Styles?.SelectAllContainer"
+             class="@selectAllClasses @Classes?.SelectAllContainer">
+            <button @onclick="HandleOnSelectAllClick"
+                    type="button"
+                    role="checkbox"
+                    style="@Styles?.SelectAllButton"
+                    class="bit-drp-mcn bit-drp-sab @Classes?.SelectAllButton"
+                    disabled="@(IsEnabled is false || ReadOnly)"
+                    aria-checked="@selectAllAriaChecked">
+                <div style="@Styles?.SelectAllCheckBox"
+                     class="bit-drp-chb @Classes?.SelectAllCheckBox">
+                    <i aria-hidden="true"
+                       style="@Styles?.SelectAllCheckIcon"
+                       class="bit-drp-chm @itemCheckIconCss @Classes?.SelectAllCheckIcon" />
+                </div>
+                <span style="@Styles?.SelectAllText"
+                      class="bit-drp-itx @Classes?.SelectAllText">
+                    @(SelectAllText ?? "Select all")
+                </span>
             </button>
         </div>
     }
 
     <div id="@_scrollContainerId"
+         role="listbox"
          style="@Styles?.ScrollContainer"
-         class="bit-drp-scn @Classes?.ScrollContainer">
-        @if (Virtualize)
+         class="bit-drp-scn @Classes?.ScrollContainer"
+         aria-labelledby="@(HasLabel ? _labelId : null)"
+         aria-multiselectable="@(MultiSelect ? "true" : null)">
+        @if (IsLoading)
+        {
+            @loadingContent
+        }
+        else if (Virtualize)
         {
             if (ItemsProvider is null)
             {
-                <Virtualize Items="GetSearchedItems()"
-                            Context="item"
+                <Virtualize Items="GetDisplayItems()"
                             ItemSize="ItemSize"
                             OverscanCount="OverscanCount"
                             Placeholder="VirtualizePlaceholder">
-                    <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
+                    <ItemContent Context="item">
+                        <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
+                    </ItemContent>
+                    <EmptyContent>
+                        @emptyContent
+                    </EmptyContent>
                 </Virtualize>
             }
             else
             {
                 <Virtualize @ref="_virtualizeElement"
-                            Context="item"
                             OverscanCount="OverscanCount"
                             Placeholder="VirtualizePlaceholder"
                             ItemsProvider="InternalItemsProvider">
-                    <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
+                    <ItemContent Context="item">
+                        <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
+                    </ItemContent>
+                    <EmptyContent>
+                        @emptyContent
+                    </EmptyContent>
                 </Virtualize>
             }
         }
@@ -314,12 +436,24 @@
             <CascadingValue Value="this" IsFixed="true">
                 @(Options ?? ChildContent)
             </CascadingValue>
+
+            @if (HasNoVisibleItems())
+            {
+                @emptyContent
+            }
         }
         else
         {
-            @foreach (var item in GetSearchedItems())
+            @if (HasNoVisibleItems())
+            {
+                @emptyContent
+            }
+            else
             {
-                <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
+                @foreach (var item in GetDisplayItems())
+                {
+                    <_BitDropdownItem Item="item" Dropdown="this" ItemCheckIconCss="@itemCheckIconCss" />
+                }
             }
         }
     </div>
@@ -329,5 +463,16 @@
         <div id="@_footerId">@CalloutFooterTemplate</div>
     }
 
+    @* A search silently changes the length of a list a screen reader user cannot see, so the new
+       result count is announced. The container is always rendered because a live region has to be in
+       the accessibility tree before its text changes for the change to be announced; only the text
+       comes and goes, so the region stays quiet while there is nothing to announce. *@
+    <div role="status" aria-live="polite" aria-atomic="true" class="bit-drp-lvr">
+        @if (HasSearchText && IsLoading is false)
+        {
+            @GetSearchResultsText()
+        }
+    </div>
+
 </div>
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
index ad6d7d067e..253f671949 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor.cs
@@ -10,14 +10,25 @@ namespace Bit.BlazorUI;
 /// </summary>
 public partial class BitDropdown<TItem, TValue> : BitInputBase<TValue> where TItem : class, new()
 {
-    private int? _totalItems;
+    private int? _providerTotalItems;
     private string? _searchText;
     private int _optionsVersion;
     private int _searchedItemsCacheVersion = -1;
     private string? _searchedItemsCacheKey;
+    private List<TItem>? _searchedItems;
     private HashSet<TItem>? _searchedItemsCache;
+    private string? _positionsCacheKey;
+    private int _positionsCacheVersion = -1;
+    private int _positionsSelectionVersion = -1;
+    private Dictionary<TItem, int>? _itemPositions;
+    private int _selectionVersion;
+    private string? _displayItemsCacheKey;
+    private int _displayItemsCacheVersion = -1;
+    private int _displayItemsSelectionVersion = -1;
+    private List<TItem>? _displayItems;
     private bool _isResponsiveMode;
     private bool _inputSearchHasFocus;
+    private bool _inputComboHasFocus;
     private List<TItem> _selectedItems = [];
     private List<TItem> _lastShownItems = [];
     private Virtualize<TItem>? _virtualizeElement;
@@ -36,19 +47,41 @@ namespace Bit.BlazorUI;
 
     private ElementReference _searchInputRef;
     private ElementReference _comboBoxInputRef;
+    private ElementReference _dropdownWrapperRef;
     private ElementReference _comboBoxInputResponsiveRef;
 
+    private string _typeAheadBuffer = string.Empty;
+    private DateTimeOffset _lastTypeAheadStamp;
+
 
 
     [Inject] private IJSRuntime _js { get; set; } = default!;
 
 
 
+    /// <summary>
+    /// Clears the typed search text after each selection in the multi select ComboBox mode, so the next
+    /// item is picked from the full list instead of from the previous filter.
+    /// </summary>
+    [Parameter] public bool AutoClearSearch { get; set; }
+
     /// <summary>
     /// Enables auto-focusing of the SearchBox input when the callout is open.
     /// </summary>
     [Parameter] public bool AutoFocusSearchBox { get; set; }
 
+    /// <summary>
+    /// Removes the already selected items from the callout, which suits a multi select dropdown whose
+    /// selection is visible as chips and whose list is therefore only about what is left to pick.
+    /// </summary>
+    [Parameter] public bool HideSelectedItems { get; set; }
+
+    /// <summary>
+    /// Highlights the part of the item text that matched the current search text in the callout.
+    /// Only applies to the default item rendering, not to a custom <see cref="ItemTemplate"/>.
+    /// </summary>
+    [Parameter] public bool HighlightSearch { get; set; }
+
     /// <summary>
     /// Custom template to render as a footer in the callout.
     /// </summary>
@@ -177,6 +210,16 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public Func<TItem?, TValue>? DynamicValueGenerator { get; set; }
 
+    /// <summary>
+    /// The custom template to render in the callout when there is no item to show.
+    /// </summary>
+    [Parameter] public RenderFragment? EmptyTemplate { get; set; }
+
+    /// <summary>
+    /// The text to render in the callout when there is no item to show.
+    /// </summary>
+    [Parameter] public string? EmptyText { get; set; }
+
     /// <summary>
     /// Custom search function to be used in place of the default search algorithm for checking existing an item in selected items in the ComboBox mode.
     /// </summary>
@@ -208,6 +251,12 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public bool Immediate { get; set; }
 
+    /// <summary>
+    /// Shows a loading indicator in the callout (and in place of the caret down element) while the items are being fetched.
+    /// The dropdown stays interactive, so the user can still open the callout and see the loading state.
+    /// </summary>
+    [Parameter] public bool IsLoading { get; set; }
+
     /// <summary>
     /// Determines the opening state of the callout. (two-way bound)
     /// </summary>
@@ -244,6 +293,12 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public BitDropdownItemsProvider<TItem>? ItemsProvider { get; set; }
 
+    /// <summary>
+    /// The delay in milliseconds before an <see cref="ItemsProvider"/> request is issued, which collapses
+    /// the bursts of requests produced by fast scrolling and typing into a single one.
+    /// </summary>
+    [Parameter] public int ItemsProviderDebounceTime { get; set; } = 100;
+
     /// <summary>
     /// The custom template for rendering the items of the dropdown.
     /// </summary>
@@ -259,6 +314,35 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public RenderFragment? LabelTemplate { get; set; }
 
+    /// <summary>
+    /// The custom template to render in the callout in place of the items while <see cref="IsLoading"/> is enabled.
+    /// </summary>
+    [Parameter] public RenderFragment? LoadingTemplate { get; set; }
+
+    /// <summary>
+    /// The text to render in the callout in place of the items while <see cref="IsLoading"/> is enabled.
+    /// </summary>
+    [Parameter] public string? LoadingText { get; set; }
+
+    /// <summary>
+    /// The maximum number of items that can be selected in multi select mode.
+    /// A value that is not greater than zero (and null) means no limit.
+    /// </summary>
+    [Parameter] public int? MaxSelectedItems { get; set; }
+
+    /// <summary>
+    /// The maximum number of selected items rendered in the dropdown itself. Beyond it, the chips display
+    /// collapses the extra ones into an overflow indicator and the text display switches to a summary.
+    /// Zero or null renders every selected item.
+    /// </summary>
+    [Parameter] public int? MaxDisplayedItems { get; set; }
+
+    /// <summary>
+    /// The number of characters the search text must reach before the items get filtered.
+    /// While the search text is shorter, the full list is shown and no search is performed.
+    /// </summary>
+    [Parameter] public int MinSearchLength { get; set; }
+
     /// <summary>
     /// Enables the multi select mode.
     /// </summary>
@@ -269,6 +353,12 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public string MultiSelectDelimiter { get; set; } = ", ";
 
+    /// <summary>
+    /// The composite format of the overflow indicator that stands for the selected items beyond
+    /// <see cref="MaxDisplayedItems"/> in the chips display, for example "+{0}".
+    /// </summary>
+    [Parameter] public string? OverflowTextFormat { get; set; }
+
     /// <summary>
     /// Names and selectors of the custom input type properties.
     /// </summary>
@@ -280,16 +370,43 @@ namespace Bit.BlazorUI;
     [Parameter, ResetClassBuilder]
     public bool NoBorder { get; set; }
 
+    /// <summary>
+    /// The custom template to render in the callout when the current search has no result.
+    /// Falls back to the <see cref="EmptyTemplate"/> when not set.
+    /// </summary>
+    [Parameter] public RenderFragment? NoResultsTemplate { get; set; }
+
+    /// <summary>
+    /// The text to render in the callout when the current search has no result.
+    /// Falls back to the <see cref="EmptyText"/> when not set.
+    /// </summary>
+    [Parameter] public string? NoResultsText { get; set; }
+
+    /// <summary>
+    /// The callback that is called when the selection gets cleared by the clear button.
+    /// </summary>
+    [Parameter] public EventCallback OnClear { get; set; }
+
     /// <summary>
     /// The click callback for the dropdown.
     /// </summary>
     [Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
 
+    /// <summary>
+    /// The callback that is called when the callout gets closed.
+    /// </summary>
+    [Parameter] public EventCallback OnClose { get; set; }
+
     /// <summary>
     /// The callback that is called when a new item is on added Dynamic ComboBox mode.
     /// </summary>
     [Parameter] public EventCallback<TItem> OnDynamicAdd { get; set; }
 
+    /// <summary>
+    /// The callback that is called when the callout gets opened.
+    /// </summary>
+    [Parameter] public EventCallback OnOpen { get; set; }
+
     /// <summary>
     /// The callback that called when an item gets selected.
     /// </summary>
@@ -400,9 +517,33 @@ namespace Bit.BlazorUI;
 
     /// <summary>
     /// Custom search function to be used in place of the default search algorithm.
+    /// Takes precedence over <see cref="SearchMode"/>, which only configures the default algorithm.
     /// </summary>
     [Parameter] public Func<ICollection<TItem>, string, ICollection<TItem>>? SearchFunction { get; set; }
 
+    /// <summary>
+    /// Determines how the text of an item is matched against the search text by the default
+    /// (case-insensitive) search algorithm. Ignored when a <see cref="SearchFunction"/> is provided.
+    /// </summary>
+    [Parameter] public BitDropdownSearchMode SearchMode { get; set; } = BitDropdownSearchMode.Contains;
+
+    /// <summary>
+    /// The composite format of the message announced to screen readers with the number of items the
+    /// current search produced, for example "{0} results available". Defaults to the English message.
+    /// </summary>
+    [Parameter] public string? SearchResultsText { get; set; }
+
+    /// <summary>
+    /// The text of the select all item in multi select mode.
+    /// </summary>
+    [Parameter] public string? SelectAllText { get; set; }
+
+    /// <summary>
+    /// The composite format that replaces the joined item texts in the dropdown once more than
+    /// <see cref="MaxDisplayedItems"/> items are selected, for example "{0} items selected".
+    /// </summary>
+    [Parameter] public string? SelectedItemsTextFormat { get; set; }
+
     /// <summary>
     /// Shows the clear button when an item is selected.
     /// </summary>
@@ -413,6 +554,19 @@ namespace Bit.BlazorUI;
     /// </summary>
     [Parameter] public bool ShowSearchBox { get; set; }
 
+    /// <summary>
+    /// Shows the select all item in the callout in multi select mode.
+    /// It has no effect when the items are provided by an ItemsProvider, since the items that are not
+    /// loaded yet cannot be selected.
+    /// </summary>
+    [Parameter] public bool ShowSelectAll { get; set; }
+
+    /// <summary>
+    /// The size of the dropdown.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public BitSize? Size { get; set; }
+
     /// <summary>
     /// Custom CSS styles for different parts of the BitDropdown.
     /// </summary>
@@ -521,23 +675,16 @@ public async Task _CloseCalloutBeforeAnotherCalloutIsOpened()
         await InvokeAsync(StateHasChanged);
     }
 
+    // The swipe interop of the responsive panel expects all four callbacks to exist, but only the
+    // close one has a behavior here: the panel is dismissed, it does not follow the finger.
     [JSInvokable("OnStart")]
-    public async Task _OnStart(decimal startX, decimal startY)
-    {
-
-    }
+    public Task _OnStart(decimal startX, decimal startY) => Task.CompletedTask;
 
     [JSInvokable("OnMove")]
-    public async Task _OnMove(decimal diffX, decimal diffY)
-    {
-
-    }
+    public Task _OnMove(decimal diffX, decimal diffY) => Task.CompletedTask;
 
     [JSInvokable("OnEnd")]
-    public async Task _OnEnd(decimal diffX, decimal diffY)
-    {
-
-    }
+    public Task _OnEnd(decimal diffX, decimal diffY) => Task.CompletedTask;
 
     [JSInvokable("OnClose")]
     public async Task _OnClose()
@@ -565,7 +712,9 @@ public async Task UnselectItem(TItem? item)
     internal void RegisterOption(BitDropdownOption<TValue> option)
     {
         Items!.Add((option as TItem)!);
-        _totalItems = null;
+        _searchedItems = null;
+        _itemPositions = null;
+        _displayItems = null;
         _searchedItemsCache = null;
 
         UpdateSelectedItemsFromValues();
@@ -579,23 +728,16 @@ internal void RegisterOption(BitDropdownOption<TValue> option)
     // cache is reset in OnParametersSet so a change to Items cannot reuse results from a previous set.
     internal bool ShouldRenderOptionItem(TItem item)
     {
-        if (_searchText.HasNoValue()) return true;
-
-        // The search runs over the whole item set (and may be a user-provided SearchFunction), so
-        // evaluate it once per search text and reuse the result for every option during the render
-        // cycle instead of re-running it for each item. The cache is also keyed on _optionsVersion,
-        // which the options bump when their own parameters change, so an option whose data changed
-        // (e.g. its Text) without the dropdown itself re-rendering cannot be matched against a stale
-        // result. Because Blazor sets every sibling option's parameters before any of them render,
-        // the version is stable during the option render pass and the set is rebuilt at most once.
-        if (_searchedItemsCache is null ||
-            _searchedItemsCacheKey != _searchText ||
-            _searchedItemsCacheVersion != _optionsVersion)
-        {
-            _searchedItemsCacheKey = _searchText;
-            _searchedItemsCacheVersion = _optionsVersion;
-            _searchedItemsCache = [.. GetSearchedItems()];
-        }
+        if (HideSelectedItems && GetItemType(item) == BitDropdownItemType.Normal && GetIsSelected(item)) return false;
+
+        if (SearchText is null) return true;
+
+        // Every option asks this during the render cycle, so the searched items are looked up as a set
+        // instead of scanning the result list once per option. GetSearchedItems keeps the underlying
+        // results keyed on the search text and _optionsVersion (which the options bump when their own
+        // parameters change) and drops this set whenever it recomputes them, so an option whose data
+        // changed without the dropdown itself re-rendering cannot be matched against a stale result.
+        _searchedItemsCache ??= [.. GetSearchedItems()];
 
         return _searchedItemsCache.Contains(item);
     }
@@ -631,7 +773,9 @@ internal void UnregisterOption(BitDropdownOption<TValue> option)
 
         var item = (option as TItem)!;
         Items!.Remove(item);
-        _totalItems = null;
+        _searchedItems = null;
+        _itemPositions = null;
+        _displayItems = null;
         _searchedItemsCache = null;
 
         if (_selectedItems.Contains(item))
@@ -652,6 +796,20 @@ internal async Task HandleOnItemClick(TItem item)
 
         await AddOrRemoveSelectedItem(item);
 
+        if (MultiSelect is false)
+        {
+            // Selecting an item hides the callout along with the focused option,
+            // so return the focus to the dropdown (or its combo input).
+            if (Combo)
+            {
+                await FocusComboInputAsync();
+            }
+            else
+            {
+                await _dropdownWrapperRef.FocusAsync();
+            }
+        }
+
         StateHasChanged();
     }
 
@@ -659,12 +817,14 @@ internal string GetItemWrapperCssClasses(TItem item)
     {
         var stringBuilder = new StringBuilder("bit-drp-iwr");
 
-        if (GetIsSelected(item))
+        var isSelected = GetIsSelected(item);
+
+        if (isSelected)
         {
             stringBuilder.Append(" bit-drp-chd");
         }
 
-        if (GetIsEnabled(item) is false)
+        if (GetIsItemDisabled(item))
         {
             stringBuilder.Append(" bit-drp-ids");
         }
@@ -672,24 +832,77 @@ internal string GetItemWrapperCssClasses(TItem item)
         return stringBuilder.ToString();
     }
 
-    internal int? GetTotalItems()
+    // Reaching the selection limit makes the items that are not selected yet unavailable, so they are
+    // disabled like any other disabled item instead of only being styled as such.
+    internal bool GetIsItemDisabled(TItem item)
     {
-        if (Items is null) return null;
+        if (GetIsEnabled(item) is false) return true;
+
+        return IsMaxSelectedItemsReached && GetIsSelected(item) is false;
+    }
 
-        if (_totalItems.HasValue is false)
+    internal bool IsMaxSelectedItemsReached => MultiSelect && MaxSelectedItems is > 0 && IsValuesCountAtLeast(MaxSelectedItems.Value);
+
+    // This is evaluated once per rendered item, so a full enumeration of Values (which is an
+    // IEnumerable and may be lazy) has to be avoided: collections expose their count directly, and
+    // for anything else it is enough to know whether the limit is already reached.
+    private bool IsValuesCountAtLeast(int count)
+    {
+        if (Values is null) return false;
+
+        if (Values is ICollection<TValue?> collection) return collection.Count >= count;
+
+        return Values.Skip(count - 1).Any();
+    }
+
+    // The position of each selectable item within the list as it is currently rendered, so an option can
+    // report "3 of 10" instead of just being one of an unnamed set. It is a map built once per search
+    // rather than an index lookup per item, which is what made an earlier attempt at this quadratic.
+    private Dictionary<TItem, int> GetItemPositions()
+    {
+        var search = SearchText;
+
+        // The selection version is part of the key because GetDisplayItems drops the selected items when
+        // HideSelectedItems is on, which shifts the position of every item that comes after them.
+        if (_itemPositions is null ||
+            _positionsCacheKey != search ||
+            _positionsCacheVersion != _optionsVersion ||
+            _positionsSelectionVersion != _selectionVersion)
         {
-            _totalItems = Items.Count(i => GetItemType(i) == BitDropdownItemType.Normal);
+            _positionsCacheKey = search;
+            _positionsCacheVersion = _optionsVersion;
+            _positionsSelectionVersion = _selectionVersion;
+            _itemPositions = [];
+
+            var position = 0;
+            foreach (var item in GetDisplayItems())
+            {
+                if (GetItemType(item) != BitDropdownItemType.Normal) continue;
+                if (GetIsHidden(item)) continue;
+
+                _itemPositions[item] = ++position;
+            }
         }
 
-        return _totalItems.Value;
+        return _itemPositions;
+    }
+
+    internal int? GetTotalItems()
+    {
+        // With an ItemsProvider only a window of the list is loaded, so the size of the whole set is the
+        // one the provider reported, and the position within it is not knowable from the window alone.
+        if (ItemsProvider is not null) return _providerTotalItems;
+
+        if (Items is null) return null;
+
+        return GetItemPositions().Count;
     }
 
     internal int? GetItemPosInSet(TItem item)
     {
-        return null;
+        if (ItemsProvider is not null) return null;
 
-        // This code was removed because it caused performance issues when the items parameter had a large number of records.
-        //return Items?.Where(i => GetItemType(i) == BitDropdownItemType.Normal).ToList().IndexOf(item) + 1;
+        return GetItemPositions().TryGetValue(item, out var position) ? position : null;
     }
 
     internal bool GetIsSelected(TItem item)
@@ -1003,8 +1216,12 @@ protected override void RegisterCssClasses()
 
         ClassBuilder.Register(() => GetColorClass());
 
+        ClassBuilder.Register(() => GetSizeClass());
+
         ClassBuilder.Register(() => Required ? "bit-drp-req" : string.Empty);
 
+        ClassBuilder.Register(() => ReadOnly ? "bit-drp-rol" : string.Empty);
+
         ClassBuilder.Register(() => _selectedItems?.Count > 0 ? "bit-drp-hvl" : string.Empty);
 
         ClassBuilder.Register(() => Chips ? "bit-drp-sch" : string.Empty);
@@ -1088,7 +1305,9 @@ protected override void OnParametersSet()
 
         // Items (or the search inputs) may have changed with this parameter set, so drop any cached
         // search results (and item count) computed for the previous one; they get rebuilt on demand.
-        _totalItems = null;
+        _searchedItems = null;
+        _itemPositions = null;
+        _displayItems = null;
         _searchedItemsCache = null;
 
         base.OnParametersSet();
@@ -1102,6 +1321,14 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
         _dotnetObj = DotNetObjectReference.Create(this);
 
+        try
+        {
+            // Prevents the default behavior (scrolling) of the navigation keys handled by the
+            // keydown handlers, since Blazor cannot conditionally preventDefault per key.
+            await _js.BitDropdownsSetup(_Id, _calloutId);
+        }
+        catch (JSDisconnectedException) { } // we can ignore this exception here
+
         if (Responsive is false) return;
 
         await _js.BitSwipesSetup(_calloutId, 0.25m, BitPanelPosition.End, Dir is BitDir.Rtl, BitSwipeOrientation.Horizontal, _dotnetObj);
@@ -1137,6 +1364,8 @@ private async Task AddOrRemoveSelectedItem(TItem? item, bool addDynamic = false)
 
             var isSelected = GetIsSelected(item) is false;
 
+            if (isSelected && IsMaxSelectedItemsReached) return;
+
             var tempValue = Values?.ToList() ?? [];
 
             if (isSelected)
@@ -1164,6 +1393,14 @@ private async Task AddOrRemoveSelectedItem(TItem? item, bool addDynamic = false)
                 }
             }
 
+            if (AutoClearSearch)
+            {
+                // The callout stays open after a multi select pick, so without this the next item has to
+                // be found through the filter left over from the previous one.
+                await ClearSearchBox();
+                await ClearComboBoxInput();
+            }
+
             await OnSelectItem.InvokeAsync(item);
         }
         else
@@ -1251,6 +1488,13 @@ private void UpdateSelectedItemsFromValues()
 
                 _selectedItems.Add(item);
             }
+            else if (ItemsProvider is not null && comparer.Equals(CurrentValue, default))
+            {
+                // With an ItemsProvider a value that matches none of the loaded items usually just means
+                // its item has not been fetched yet, so the selected item is kept. An empty value however
+                // is a real deselection and has to drop the item the trigger is still showing.
+                _selectedItems.Clear();
+            }
         }
 
         ClassBuilder.Reset();
@@ -1264,6 +1508,7 @@ private async Task CloseCallout()
         if (IsOpen is false) return;
 
         _rateLimiter.Reset();
+        _typeAheadBuffer = string.Empty;
 
         if (await AssignIsOpen(false) is false) return;
 
@@ -1283,6 +1528,139 @@ private async Task HandleOnClick(MouseEventArgs e)
         await FocusOnSearchBox();
     }
 
+    // The default behavior of the navigation keys handled here is prevented by the keydown listener of
+    // Dropdowns.ts (Blazor cannot preventDefault per key), so the keys handled here and the ones listed
+    // there have to be kept in sync.
+    private async Task HandleOnTriggerKeyDown(KeyboardEventArgs e)
+    {
+        if (IsEnabled is false) return;
+
+        if (e.Key is "Escape")
+        {
+            await CloseCallout();
+            return;
+        }
+
+        if (Combo)
+        {
+            // Typing is handled by the combo input itself; only the arrow keys manage the callout here.
+            if (e.Key is "ArrowDown" or "ArrowUp")
+            {
+                await OpenCallout();
+                await FocusItem("selected");
+            }
+            return;
+        }
+
+        if (e.Key is "Enter" or " ")
+        {
+            if (IsOpen)
+            {
+                await CloseCallout();
+            }
+            else
+            {
+                await OpenCallout();
+                await FocusItem("selected");
+            }
+        }
+        else if (e.Key is "ArrowDown" or "ArrowUp")
+        {
+            await OpenCallout();
+            await FocusItem("selected");
+        }
+        else if (IsPrintableKey(e))
+        {
+            await OpenCallout();
+            await FocusItem("char", GetTypeAheadBuffer(e.Key!));
+        }
+    }
+
+    // See the note on HandleOnTriggerKeyDown about keeping these keys in sync with Dropdowns.ts.
+    private async Task HandleOnCalloutKeyDown(KeyboardEventArgs e)
+    {
+        if (IsEnabled is false || IsOpen is false) return;
+
+        switch (e.Key)
+        {
+            case "ArrowDown":
+                await FocusItem("next");
+                break;
+            case "ArrowUp":
+                // Alt+ArrowUp dismisses the popup and returns to the trigger, per the APG combobox pattern.
+                if (e.AltKey)
+                {
+                    await CloseCallout();
+                    await _dropdownWrapperRef.FocusAsync();
+                }
+                else
+                {
+                    await FocusItem("prev");
+                }
+                break;
+            case "PageDown":
+                await FocusItem("nextPage");
+                break;
+            case "PageUp":
+                await FocusItem("prevPage");
+                break;
+            case "Home":
+            case "End":
+                // Home/End keep their caret behavior while typing in the search/combo inputs.
+                if (_inputSearchHasFocus is false && _inputComboHasFocus is false)
+                {
+                    await FocusItem(e.Key is "Home" ? "first" : "last");
+                }
+                break;
+            case "Escape":
+                await CloseCallout();
+                await _dropdownWrapperRef.FocusAsync();
+                break;
+            case "Tab":
+                // The callout is rendered at the end of the document, so leaving it without moving the
+                // focus back to the dropdown would continue the tab order from an unrelated place.
+                await CloseCallout();
+                await _dropdownWrapperRef.FocusAsync();
+                break;
+            default:
+                // In Combo mode the combo input is the type-ahead, and printable keys
+                // typed into the search box must keep filtering instead of moving focus.
+                if (Combo is false && _inputSearchHasFocus is false && IsPrintableKey(e))
+                {
+                    await FocusItem("char", GetTypeAheadBuffer(e.Key!));
+                }
+                break;
+        }
+    }
+
+    // Keep this in sync with the isPrintable helper of Dropdowns.ts.
+    private static bool IsPrintableKey(KeyboardEventArgs e)
+    {
+        return e.Key?.Length is 1 && e.Key != " " && e.CtrlKey is false && e.AltKey is false && e.MetaKey is false;
+    }
+
+    private string GetTypeAheadBuffer(string key)
+    {
+        // Accumulates the keys typed in quick succession so the type-ahead matches the
+        // full string, and starts over after a pause (the common 500ms convention).
+        var now = DateTimeOffset.UtcNow;
+
+        if ((now - _lastTypeAheadStamp).TotalMilliseconds > 500)
+        {
+            _typeAheadBuffer = string.Empty;
+        }
+
+        _lastTypeAheadStamp = now;
+        _typeAheadBuffer += key;
+
+        return _typeAheadBuffer;
+    }
+
+    private ValueTask FocusItem(string mode, string? character = null)
+    {
+        return _js.BitDropdownsFocusItem(_calloutId, mode, character, Virtualize);
+    }
+
     private void HandleOnValueChanged(object? sender, EventArgs args)
     {
         UpdateSelectedItemsFromValues();
@@ -1298,6 +1676,16 @@ private void HandleSearchBoxFocusOut()
         _inputSearchHasFocus = false;
     }
 
+    private void HandleComboInputFocusIn()
+    {
+        _inputComboHasFocus = true;
+    }
+
+    private void HandleComboInputFocusOut()
+    {
+        _inputComboHasFocus = false;
+    }
+
     private Task HandleSearchBoxOnClear()
     {
         return ClearSearchBox();
@@ -1352,7 +1740,21 @@ private async Task ClearSearchBox()
 
     private void OnSetIsOpen()
     {
-        _ = ClearSearchBox();
+        // The hook of a [CallOnSet] parameter is synchronous, so the work is fired and forgotten.
+        // Wrapped in a local async method (instead of separate discarded tasks) so the steps run in
+        // order rather than racing over _searchText, and so a throwing one surfaces through Blazor's
+        // normal async error handling via the renderer dispatcher instead of on an unobserved task.
+        _ = InvokeAsync(async () =>
+        {
+            await ClearSearchBox();
+
+            // The combo input doubles as the search input, so a text that was typed but never committed
+            // to a selection must not survive the callout, otherwise the trigger keeps showing a filter
+            // term instead of the current selection the next time the dropdown is opened.
+            await ClearComboBoxInput();
+
+            await (IsOpen ? OnOpen.InvokeAsync() : OnClose.InvokeAsync());
+        });
     }
 
     private async ValueTask FocusOnSearchBox()
@@ -1377,6 +1779,10 @@ private async Task ClearComboBoxInput()
         _searchText = null;
 
         RefreshOptions();
+
+        // The items of a virtualized combo box come from the ItemsProvider filtered by the search
+        // text, so dropping the text has to re-request them just like clearing the search box does.
+        await SearchVirtualized();
     }
 
     private async ValueTask FocusOnComboBoxInput()
@@ -1389,17 +1795,98 @@ private async ValueTask FocusOnComboBoxInput()
         await _comboBoxInputRef.FocusAsync();
     }
 
+    // The term the items are actually filtered by. It is null until the typed text is long enough for
+    // MinSearchLength, so a short term shows the full list instead of a nearly unfiltered one (and, with
+    // an ItemsProvider, does not turn every first keystroke into a query).
+    private string? SearchText => _searchText.HasValue() && _searchText!.Length >= MinSearchLength ? _searchText : null;
+
+    internal bool IsItemTextMatch(string? text)
+    {
+        if (text is null) return false;
+
+        var search = SearchText;
+        if (search is null) return true;
+
+        return SearchMode switch
+        {
+            BitDropdownSearchMode.StartsWith => text.StartsWith(search, StringComparison.OrdinalIgnoreCase),
+            BitDropdownSearchMode.EndsWith => text.EndsWith(search, StringComparison.OrdinalIgnoreCase),
+            BitDropdownSearchMode.ExactMatch => text.Equals(search, StringComparison.OrdinalIgnoreCase),
+            _ => text.Contains(search, StringComparison.OrdinalIgnoreCase)
+        };
+    }
+
+    // The index at which the item text matched the search, so the default item rendering can highlight
+    // exactly the matched part. Returns -1 when there is nothing to highlight.
+    internal int GetHighlightIndex(string? text)
+    {
+        if (HighlightSearch is false) return -1;
+        if (text is null) return -1;
+
+        var search = SearchText;
+        if (search is null) return -1;
+
+        return SearchMode switch
+        {
+            BitDropdownSearchMode.StartsWith => text.StartsWith(search, StringComparison.OrdinalIgnoreCase) ? 0 : -1,
+            BitDropdownSearchMode.EndsWith => text.EndsWith(search, StringComparison.OrdinalIgnoreCase) ? text.Length - search.Length : -1,
+            BitDropdownSearchMode.ExactMatch => text.Equals(search, StringComparison.OrdinalIgnoreCase) ? 0 : -1,
+            _ => text.IndexOf(search, StringComparison.OrdinalIgnoreCase)
+        };
+    }
+
+    internal int GetHighlightLength() => SearchText?.Length ?? 0;
+
+    // The searched items are read several times while the callout renders (the empty state check, the
+    // item list itself and the select all state), and the search may be a user-provided SearchFunction
+    // over the whole item set, so the result is computed once per search text and reused. An unfiltered
+    // list needs no work at all, so it keeps returning the live collection and cannot go stale.
     private ICollection<TItem> GetSearchedItems()
     {
         var items = ItemsProvider is null ? Items : _lastShownItems;
         if (items is null) return [];
 
-        return _searchText.HasNoValue()
-                ? items
-                : SearchFunction is not null
-                    ? SearchFunction.Invoke(items, _searchText!)
-                    : [.. items.Where(i => GetItemType(i) == BitDropdownItemType.Normal &&
-                                           GetText(i)?.Contains(_searchText!, StringComparison.OrdinalIgnoreCase) is true)];
+        var search = SearchText;
+        if (search is null) return items;
+
+        if (_searchedItems is null ||
+            _searchedItemsCacheKey != search ||
+            _searchedItemsCacheVersion != _optionsVersion)
+        {
+            _searchedItemsCacheKey = search;
+            _searchedItemsCacheVersion = _optionsVersion;
+            _searchedItemsCache = null;
+            _searchedItems = SearchFunction is not null
+                ? [.. SearchFunction.Invoke(items, search)]
+                : [.. items.Where(i => GetItemType(i) == BitDropdownItemType.Normal && IsItemTextMatch(GetText(i)))];
+        }
+
+        return _searchedItems;
+    }
+
+    // What the callout actually renders: the search result, minus the already selected items when they
+    // are meant to disappear from the list. Kept separate from GetSearchedItems so that the select all
+    // item still works over the full result rather than over the leftovers. The result is cached like
+    // the search itself, so that repeated reads during one render (and Virtualize, which re-renders
+    // everything when handed a new collection instance) see the same list.
+    private ICollection<TItem> GetDisplayItems()
+    {
+        var items = GetSearchedItems();
+
+        if (HideSelectedItems is false) return items;
+
+        if (_displayItems is null ||
+            _displayItemsCacheKey != SearchText ||
+            _displayItemsCacheVersion != _optionsVersion ||
+            _displayItemsSelectionVersion != _selectionVersion)
+        {
+            _displayItemsCacheKey = SearchText;
+            _displayItemsCacheVersion = _optionsVersion;
+            _displayItemsSelectionVersion = _selectionVersion;
+            _displayItems = [.. items.Where(i => GetItemType(i) != BitDropdownItemType.Normal || GetIsSelected(i) is false)];
+        }
+
+        return _displayItems;
     }
 
     private string GetSearchBoxClasses()
@@ -1419,9 +1906,12 @@ private string GetSearchBoxClasses()
         return className.ToString();
     }
 
+    // Whether the label element carrying _labelId is rendered, so nothing references a missing element.
+    private bool HasLabel => LabelTemplate is not null || Label.HasValue();
+
     private string GetDropdownAriaLabelledby()
     {
-        return Label.HasValue() ? $"{_labelId} {_dropdownTextContainerId}" : _dropdownTextContainerId;
+        return HasLabel ? $"{_labelId} {_dropdownTextContainerId}" : _dropdownTextContainerId;
     }
 
     private async Task SearchVirtualized()
@@ -1454,6 +1944,96 @@ private async Task HandleOnClearClick()
         }
 
         UpdateSelectedItemsFromValues();
+
+        await OnClear.InvokeAsync();
+    }
+
+    // Tells the empty state of an unsuccessful search apart from the empty state of an empty list, so
+    // the callout can show "no results for what you typed" instead of "there is nothing here".
+    private bool HasSearchText => SearchText is not null;
+
+    private string GetSearchResultsText()
+    {
+        var count = GetSearchedItems().Count(i => GetItemType(i) == BitDropdownItemType.Normal && GetIsHidden(i) is false);
+
+        return SearchResultsText is not null
+                ? string.Format(SearchResultsText, count)
+                : count == 1 ? "1 result available" : $"{count} results available";
+    }
+
+    private bool HasNoVisibleItems()
+    {
+        return GetDisplayItems().Any(i => GetItemType(i) == BitDropdownItemType.Normal && GetIsHidden(i) is false) is false;
+    }
+
+    private (bool AllSelected, bool AnySelected) GetSelectAllState()
+    {
+        var candidates = GetSelectAllCandidateItems();
+        if (candidates.Count == 0) return (false, false);
+
+        var selectedCount = candidates.Count(GetIsSelected);
+
+        return (selectedCount == candidates.Count, selectedCount > 0);
+    }
+
+    private List<TItem> GetSelectAllCandidateItems()
+    {
+        return [.. GetSearchedItems().Where(i => GetItemType(i) == BitDropdownItemType.Normal &&
+                                                 GetIsHidden(i) is false &&
+                                                 GetIsEnabled(i))];
+    }
+
+    private async Task HandleOnSelectAllClick()
+    {
+        if (ReadOnly) return;
+        if (IsEnabled is false) return;
+        if (MultiSelect is false) return;
+        if (ValuesHasBeenSet && ValuesChanged.HasDelegate is false) return;
+
+        var candidates = GetSelectAllCandidateItems();
+        if (candidates.Count == 0) return;
+
+        var comparer = EqualityComparer<TValue>.Default;
+
+        List<TValue?> newValues;
+        if (candidates.TrueForAll(GetIsSelected))
+        {
+            // All (searched) items are selected, so the select all item clears them, keeping
+            // the selected values that are not part of the current search results.
+            var candidateValues = candidates.Select(GetValue).ToList();
+            newValues = [.. (Values ?? []).Where(v => candidateValues.Exists(cv => comparer.Equals(cv, v)) is false)];
+        }
+        else
+        {
+            newValues = Values?.ToList() ?? [];
+            foreach (var item in candidates)
+            {
+                if (GetIsSelected(item)) continue;
+                if (MaxSelectedItems is > 0 && newValues.Count >= MaxSelectedItems.Value) break;
+
+                newValues.Add(GetValue(item));
+            }
+        }
+
+        // The items added dynamically in the ComboBox mode are not part of Items, so assigning the
+        // values (which rebuilds the selected items from Items) would drop them; they are kept here
+        // as long as their values are still selected.
+        var dynamicItems = Combo && Dynamic
+            ? _selectedItems.FindAll(si => Items?.Contains(si) is not true)
+            : [];
+
+        await AssignValues(newValues);
+
+        foreach (var item in dynamicItems)
+        {
+            if (newValues.Exists(v => comparer.Equals(v, GetValue(item))) is false) continue;
+            if (_selectedItems.Exists(si => comparer.Equals(GetValue(si), GetValue(item)))) continue;
+
+            _selectedItems.Add(item);
+            ClassBuilder.Reset();
+        }
+
+        await OnValuesChange.InvokeAsync([.. (Values ?? [])!]);
     }
 
     private async Task HandleOnAddItemComboClick()
@@ -1477,6 +2057,27 @@ private async Task HandleOnAddItemComboClick()
         await CloseCallout();
     }
 
+    // The height available to the scrollable item list is the callout's height minus the parts that sit
+    // above it, so every one of those parts has to be reported here or the callout overflows the
+    // viewport. The values mirror the --bit-drp-h (search box) and --bit-drp-itm-h plus its bottom
+    // border (select all row) of each size in the stylesheet.
+    private int GetCalloutScrollOffset()
+    {
+        var offset = 0;
+
+        if (ShowSearchBox && Combo is false)
+        {
+            offset += Size switch { BitSize.Small => 26, BitSize.Large => 40, _ => 32 };
+        }
+
+        if (MultiSelect && ShowSelectAll && ItemsProvider is null)
+        {
+            offset += Size switch { BitSize.Small => 31, BitSize.Large => 45, _ => 37 };
+        }
+
+        return offset;
+    }
+
     private async Task ToggleCallout()
     {
         if (IsEnabled is false || IsDisposed) return;
@@ -1493,7 +2094,7 @@ private async Task ToggleCallout()
             dropDirection: DropDirection,
             isRtl: Dir is BitDir.Rtl,
             scrollContainerId: _scrollContainerId,
-            scrollOffset: ShowSearchBox && Combo is false ? 32 : 0,
+            scrollOffset: GetCalloutScrollOffset(),
             headerId: CalloutHeaderTemplate is not null ? _headerId : "",
             footerId: CalloutFooterTemplate is not null ? _footerId : "",
             setCalloutWidth: PreserveCalloutWidth is false,
@@ -1506,19 +2107,31 @@ private async ValueTask<ItemsProviderResult<TItem>> InternalItemsProvider(ItemsP
         if (ItemsProvider is null) return default;
 
         // Debounce the requests. This eliminates a lot of redundant queries at the cost of slight lag after interactions.
-        // TODO: Consider making this configurable, or smarter (e.g., doesn't delay on first call in a batch, then the amount
-        // of delay increases if you rapidly issue repeated requests, such as when scrolling a long way)
-        await Task.Delay(100);
+        // The token is not passed to the delay on purpose: a cancellation is a normal outcome here (the
+        // user kept scrolling or typing) and is reported by returning an empty result, not by throwing.
+        if (ItemsProviderDebounceTime > 0)
+        {
+            await Task.Delay(ItemsProviderDebounceTime);
+        }
 
         if (request.CancellationToken.IsCancellationRequested) return default;
 
         // Combine the query parameters from Virtualize with the ones from PaginationState
-        var providerRequest = new BitDropdownItemsProviderRequest<TItem>(request.StartIndex, request.Count, _searchText, request.CancellationToken);
+        var providerRequest = new BitDropdownItemsProviderRequest<TItem>(request.StartIndex, request.Count, SearchText, request.CancellationToken);
         var providerResult = await ItemsProvider(providerRequest);
 
         if (request.CancellationToken.IsCancellationRequested) return default;
 
         _lastShownItems = [.. providerResult.Items];
+        _providerTotalItems = providerResult.TotalItemCount;
+
+        // The caches below are keyed on the search text and the options version, neither of which changes
+        // when the provider hands over a different window of items for the same search, so they have to be
+        // dropped here or the new window would be filtered and positioned against the previous one.
+        _searchedItems = null;
+        _itemPositions = null;
+        _displayItems = null;
+        _searchedItemsCache = null;
 
         UpdateSelectedItemsFromValues();
         await InvokeAsync(StateHasChanged);
@@ -1526,43 +2139,6 @@ private async ValueTask<ItemsProviderResult<TItem>> InternalItemsProvider(ItemsP
         return new ItemsProviderResult<TItem>(providerResult.Items, providerResult.TotalItemCount);
     }
 
-    private bool CheckInvalidForSelect(TItem item)
-    {
-        if (item is BitDropdownItem<TValue> dropdownItem)
-        {
-            return dropdownItem.IsHidden is false &&
-                   dropdownItem.IsEnabled &&
-                   dropdownItem.ItemType == BitDropdownItemType.Normal &&
-                   dropdownItem.Id.HasNoValue();
-        }
-
-        if (item is BitDropdownOption<TValue> dropdownOption)
-        {
-            return dropdownOption.IsHidden is false &&
-                   dropdownOption.IsEnabled &&
-                   dropdownOption.ItemType == BitDropdownItemType.Normal &&
-                   dropdownOption.Id.HasNoValue();
-        }
-
-        if (NameSelectors is null) return false;
-
-        if (NameSelectors.IsHidden.Selector is not null &&
-            NameSelectors.IsEnabled.Selector is not null &&
-            NameSelectors.ItemType.Selector is not null &&
-            NameSelectors.Id.Selector is not null)
-        {
-            return NameSelectors.IsHidden.Selector!(item) is false &&
-                   NameSelectors.IsEnabled.Selector!(item) &&
-                   NameSelectors.ItemType.Selector!(item) == BitDropdownItemType.Normal &&
-                   NameSelectors.Id.Selector!(item).HasNoValue();
-        }
-
-        return item.GetValueFromProperty<bool>(NameSelectors.IsHidden.Name) is false &&
-               item.GetValueFromProperty<bool>(NameSelectors.IsEnabled.Name) &&
-               item.GetValueFromProperty<BitDropdownItemType>(NameSelectors.ItemType.Name) == BitDropdownItemType.Normal &&
-               item.GetValueFromProperty<string?>(NameSelectors.Id.Name).HasNoValue();
-    }
-
     private async Task HandleOnKeyDown(KeyboardEventArgs eventArgs)
     {
         if (IsEnabled is false || InvalidValueBinding()) return;
@@ -1760,9 +2336,38 @@ private async Task AddDynamicItem()
         }
     }
 
+    // The number of selected items the dropdown itself renders, the rest being collapsed into the
+    // overflow indicator (chips) or the summary text.
+    private int GetDisplayedItemsCount()
+    {
+        return MaxDisplayedItems is > 0 && _selectedItems.Count > MaxDisplayedItems.Value
+                ? MaxDisplayedItems.Value
+                : _selectedItems.Count;
+    }
+
+    private int GetOverflowItemsCount() => _selectedItems.Count - GetDisplayedItemsCount();
+
+    private string GetOverflowText()
+    {
+        var count = GetOverflowItemsCount();
+
+        return OverflowTextFormat is not null ? string.Format(OverflowTextFormat, count) : $"+{count}";
+    }
+
     private string? GetText()
     {
-        return MultiSelect ? string.Join(MultiSelectDelimiter, _selectedItems.Select(GetText)) : GetText(_selectedItems.FirstOrDefault());
+        if (MultiSelect is false) return GetText(_selectedItems.FirstOrDefault());
+
+        // Past the display limit the individual texts stop being readable in the width of a dropdown,
+        // so a count of the selection says more than a truncated list of names.
+        if (GetOverflowItemsCount() > 0)
+        {
+            return SelectedItemsTextFormat is not null
+                    ? string.Format(SelectedItemsTextFormat, _selectedItems.Count)
+                    : $"{_selectedItems.Count} items selected";
+        }
+
+        return string.Join(MultiSelectDelimiter, _selectedItems.Select(GetText));
     }
 
     private void OnSetValues()
@@ -1791,6 +2396,10 @@ private void SetIsSelected(TItem item, bool value)
 
     private void SetIsSelectedForSelectedItems()
     {
+        // Every selection change passes through here, so this is where the caches that depend on which
+        // items are selected (the hidden-when-selected list) learn that they are out of date.
+        _selectionVersion++;
+
         var items = ItemsProvider is null ? Items : _lastShownItems;
         if (items is null) return;
 
@@ -1819,6 +2428,13 @@ private string GetCalloutCssClasses()
             classes.Add("bit-drp-res");
         }
 
+        if (ReadOnly)
+        {
+            // The callout is rendered outside the root element, so it needs its own read-only marker to
+            // stop the items from advertising an interaction the component silently ignores.
+            classes.Add("bit-drp-rol");
+        }
+
         if (Dir is BitDir.Rtl)
         {
             classes.Add("bit-drp-rtl");
@@ -1826,9 +2442,24 @@ private string GetCalloutCssClasses()
 
         classes.Add(GetColorClass());
 
+        // The callout renders outside the root element, so the size class has to be repeated on it for
+        // the items to follow the size of the dropdown they belong to.
+        classes.Add(GetSizeClass());
+
         return string.Join(' ', classes).Trim();
     }
 
+    private string GetSizeClass()
+    {
+        return Size switch
+        {
+            BitSize.Small => "bit-drp-sm",
+            BitSize.Medium => "bit-drp-md",
+            BitSize.Large => "bit-drp-lg",
+            _ => string.Empty
+        };
+    }
+
     private string GetColorClass()
     {
         return Color switch
@@ -1866,6 +2497,7 @@ protected override async ValueTask DisposeAsync(bool disposing)
 
         try
         {
+            await _js.BitDropdownsDispose(_Id);
             await _js.BitCalloutClearCallout(_calloutId);
             await _js.BitSwipesDispose(_calloutId);
         }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
index fa67160492..aefe7eee80 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss
@@ -1,6 +1,16 @@
 @import "../../../Styles/functions.scss";
 @import "../../../Styles/media-queries.scss";
 
+// The size of the control and of its callout is driven by these variables so a single size class,
+// applied to the root element and repeated on the callout, resizes every part consistently.
+@mixin drp-size-medium {
+    --bit-drp-fs: #{spacing(1.75)};
+    --bit-drp-h: #{spacing(4)};
+    --bit-drp-lh: #{spacing(3.75)};
+    --bit-drp-itm-h: #{spacing(4.5)};
+    --bit-drp-itm-fs: #{spacing(1.875)};
+}
+
 .bit-drp {
     width: 100%;
     display: flex;
@@ -10,6 +20,7 @@
     --bit-drp-clr: #{$clr-pri};
     --bit-drp-clr-hover: #{$clr-pri-hover};
     --bit-drp-clr-text: #{$clr-pri-text};
+    @include drp-size-medium;
 
     &.bit-drp-req {
         .bit-drp-lbl {
@@ -150,7 +161,7 @@
     user-select: none;
     color: $clr-fg-sec;
     position: relative;
-    min-height: spacing(4);
+    min-height: var(--bit-drp-h);
     box-sizing: border-box;
     background-color: $clr-bg-pri;
     border-radius: $shp-border-radius;
@@ -201,8 +212,8 @@
     white-space: nowrap;
     box-sizing: border-box;
     text-overflow: ellipsis;
-    font-size: spacing(1.75);
-    line-height: spacing(3.75);
+    font-size: var(--bit-drp-fs);
+    line-height: var(--bit-drp-lh);
     border-radius: spacing(0.25);
     padding-inline-start: spacing(1);
 }
@@ -213,7 +224,7 @@
         display: flex;
         flex-wrap: wrap;
         gap: spacing(0.5);
-        min-height: spacing(4);
+        min-height: var(--bit-drp-h);
         padding: spacing(1) spacing(3.5) spacing(1) spacing(1);
     }
 }
@@ -222,13 +233,45 @@
     display: flex;
     cursor: default;
     gap: spacing(0.5);
+    align-items: center;
     padding: 0 spacing(0.5);
     border-radius: spacing(0.25);
     background-color: $clr-bg-sec;
     border: $shp-border-width $shp-border-style $clr-brd-sec;
+}
+
+// Stands for the selected items that did not fit in the chips display.
+.bit-drp-ovf {
+    cursor: default;
+    font-weight: 600;
+    color: var(--bit-drp-clr-text);
+    border-color: var(--bit-drp-clr);
+    background-color: var(--bit-drp-clr);
+}
+
+.bit-drp-crb {
+    padding: 0;
+    border: none;
+    display: flex;
+    cursor: pointer;
+    color: inherit;
+    align-items: center;
+    outline: transparent;
+    border-radius: spacing(0.25);
+    background-color: transparent;
 
     i {
-        cursor: pointer;
+        font-size: spacing(1.5);
+    }
+
+    &:focus-visible {
+        outline: spacing(0.25) $shp-border-style var(--bit-drp-clr);
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            color: $clr-fg-pri-hover;
+        }
     }
 }
 
@@ -257,7 +300,7 @@
     color: $clr-fg-pri;
     position: relative;
     align-items: center;
-    height: spacing(4.5);
+    height: var(--bit-drp-itm-h);
     padding: 0 spacing(1);
     box-sizing: border-box;
     line-height: spacing(2.5);
@@ -349,7 +392,7 @@
     align-items: center;
     white-space: nowrap;
     padding: 0 spacing(1.25);
-    min-height: spacing(3.75);
+    min-height: var(--bit-drp-h);
     color: $clr-fg-pri;
     background: $clr-bg-sec;
 
@@ -369,7 +412,7 @@
     user-select: none;
     position: relative;
     align-items: center;
-    font-size: spacing(1.75);
+    font-size: var(--bit-drp-fs);
     background-color: transparent;
 }
 
@@ -412,11 +455,11 @@
     box-shadow: none;
     font-weight: 400;
     border-radius: 0;
-    height: spacing(4);
+    height: var(--bit-drp-h);
     align-items: stretch;
     flex-flow: row nowrap;
     box-sizing: border-box;
-    font-size: spacing(1.75);
+    font-size: var(--bit-drp-fs);
     color: $clr-fg-pri;
     border-style: $shp-border-style;
     border-color: $clr-brd-pri;
@@ -444,11 +487,11 @@
     box-shadow: none;
     font-weight: 400;
     border-radius: 0;
-    height: spacing(4);
+    height: var(--bit-drp-h);
     align-items: stretch;
     flex-flow: row nowrap;
     box-sizing: border-box;
-    font-size: spacing(1.75);
+    font-size: var(--bit-drp-fs);
     color: $clr-fg-pri;
     border-style: $shp-border-style;
     border-color: $clr-brd-pri;
@@ -643,8 +686,9 @@
     overflow: hidden;
     box-sizing: border-box;
     z-index: $zindex-callout;
-    font-size: spacing(1.75);
+    font-size: var(--bit-drp-fs);
     animation-fill-mode: both;
+    @include drp-size-medium;
     animation-duration: $mot-duration-long;
     box-shadow: $box-shadow-callout;
     border-radius: $shp-border-radius;
@@ -664,11 +708,11 @@
     cursor: default;
     font-weight: 600;
     user-select: none;
-    height: spacing(4.5);
+    height: var(--bit-drp-itm-h);
     padding: 0 spacing(1);
     box-sizing: border-box;
-    font-size: spacing(1.875);
-    line-height: spacing(4.5);
+    font-size: var(--bit-drp-itm-fs);
+    line-height: var(--bit-drp-itm-h);
     background: none transparent;
 }
 
@@ -685,13 +729,13 @@
     color: $clr-fg-pri;
     white-space: nowrap;
     align-items: center;
-    height: spacing(4.5);
+    height: var(--bit-drp-itm-h);
     outline: transparent;
     padding: 0 spacing(1);
     text-decoration: none;
     box-sizing: border-box;
     text-overflow: ellipsis;
-    font-size: spacing(1.875);
+    font-size: var(--bit-drp-itm-fs);
     line-height: spacing(2.5);
     background-color: transparent;
     border: $shp-border-width $shp-border-style transparent;
@@ -707,6 +751,11 @@
         cursor: default;
         color: $clr-fg-dis;
 
+        // The item text carries its own color, so it has to follow the disabled state explicitly.
+        .bit-drp-itx {
+            color: $clr-fg-dis;
+        }
+
         @media (hover: hover) {
             &:hover {
                 background-color: transparent;
@@ -714,6 +763,28 @@
         }
     }
 
+// The matched part of an item text while a search is active.
+.bit-drp-hlt {
+    font-weight: 600;
+    border-radius: spacing(0.25);
+    color: var(--bit-drp-clr-text);
+    background-color: var(--bit-drp-clr);
+}
+
+// Announces the number of items the current search produced, for screen reader users who cannot see
+// the list shrink as they type. Kept out of view but not out of the accessibility tree.
+.bit-drp-lvr {
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: none;
+    margin: -1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    clip-path: inset(50%);
+}
+
 .bit-drp-sel {
     background-color: $clr-bg-sec;
 
@@ -730,6 +801,133 @@
     background-color: $clr-bg-sec;
 }
 
+.bit-drp-emp {
+    display: flex;
+    cursor: default;
+    text-align: center;
+    user-select: none;
+    color: $clr-fg-sec;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: center;
+    overflow-wrap: break-word;
+    font-size: var(--bit-drp-fs);
+    min-height: var(--bit-drp-itm-h);
+    padding: spacing(1) spacing(1.5);
+}
+
+.bit-drp-ldc {
+    display: flex;
+    cursor: default;
+    gap: spacing(1);
+    user-select: none;
+    color: $clr-fg-sec;
+    align-items: center;
+    height: var(--bit-drp-itm-h);
+    padding: 0 spacing(1);
+    box-sizing: border-box;
+    justify-content: center;
+    font-size: var(--bit-drp-fs);
+}
+
+.bit-drp-spn {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    border-radius: 50%;
+    box-sizing: border-box;
+    border-color: $clr-brd-sec;
+    border-width: spacing(0.2125);
+    border-style: $shp-border-style;
+    border-top-color: var(--bit-drp-clr);
+    animation: bit-drp-spinner-animation 1.3s linear infinite;
+    animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67);
+}
+
+@keyframes bit-drp-spinner-animation {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+// Read-only keeps the dropdown focusable and its callout browsable, but nothing inside it can be
+// changed, so none of the parts should advertise an interaction that gets silently ignored.
+.bit-drp-rol {
+    .bit-drp-wrp {
+        cursor: default;
+    }
+
+    .bit-drp-itm,
+    .bit-drp-iwr,
+    .bit-drp-mcn {
+        cursor: default;
+    }
+
+    @media (hover: hover) {
+        .bit-drp-itm:hover,
+        .bit-drp-iwr:hover {
+            background-color: transparent;
+        }
+
+        .bit-drp-iwr:hover .bit-drp-chm {
+            opacity: 0;
+        }
+
+        .bit-drp-iwr.bit-drp-chd:hover {
+            background-color: $clr-bg-sec;
+
+            .bit-drp-chm {
+                opacity: 1;
+            }
+        }
+
+        .bit-drp-sel:hover {
+            background-color: $clr-bg-sec;
+        }
+    }
+}
+
+.bit-drp-sac {
+    border-bottom: $shp-border-width $shp-border-style $clr-brd-sec;
+}
+
+.bit-drp-sai {
+    .bit-drp-chb {
+        border-color: var(--bit-drp-clr);
+
+        .bit-drp-chm {
+            opacity: 0;
+        }
+
+        &::after {
+            inset: 0;
+            content: "";
+            margin: auto;
+            position: absolute;
+            width: spacing(1.25);
+            height: spacing(1.25);
+            border-radius: spacing(0.125);
+            background-color: var(--bit-drp-clr);
+        }
+    }
+
+    @media (hover: hover) {
+        &:hover {
+            .bit-drp-chb {
+                border-color: var(--bit-drp-clr-hover);
+
+                .bit-drp-chm {
+                    opacity: 0;
+                }
+
+                &::after {
+                    background-color: var(--bit-drp-clr-hover);
+                }
+            }
+        }
+    }
+}
+
 .bit-drp-cls {
     border: none;
     cursor: pointer;
@@ -809,6 +1007,27 @@
 }
 
 
+.bit-drp-sm {
+    --bit-drp-fs: #{spacing(1.5)};
+    --bit-drp-h: #{spacing(3.25)};
+    --bit-drp-lh: #{spacing(3)};
+    --bit-drp-itm-h: #{spacing(3.75)};
+    --bit-drp-itm-fs: #{spacing(1.625)};
+}
+
+.bit-drp-md {
+    @include drp-size-medium;
+}
+
+.bit-drp-lg {
+    --bit-drp-fs: #{spacing(2)};
+    --bit-drp-h: #{spacing(5)};
+    --bit-drp-lh: #{spacing(4.75)};
+    --bit-drp-itm-h: #{spacing(5.5)};
+    --bit-drp-itm-fs: #{spacing(2.125)};
+}
+
+
 .bit-drp-pri {
     --bit-drp-clr: #{$clr-pri};
     --bit-drp-clr-hover: #{$clr-pri-hover};
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs
index d2ced9f963..5fbf752b60 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs
@@ -92,6 +92,16 @@ public class BitDropdownClassStyles
     /// </summary>
     public string? Chips { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the overflow chip of the BitDropdown.
+    /// </summary>
+    public string? OverflowChip { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the chips's remove button of the BitDropdown.
+    /// </summary>
+    public string? ChipsRemoveButton { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the chips's remove icon of the BitDropdown.
     /// </summary>
@@ -112,6 +122,31 @@ public class BitDropdownClassStyles
     /// </summary>
     public string? SearchBoxClearIcon { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the select all item container of the multi-select BitDropdown.
+    /// </summary>
+    public string? SelectAllContainer { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the select all item button of the multi-select BitDropdown.
+    /// </summary>
+    public string? SelectAllButton { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the select all item check box of the multi-select BitDropdown.
+    /// </summary>
+    public string? SelectAllCheckBox { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the select all item check icon of the multi-select BitDropdown.
+    /// </summary>
+    public string? SelectAllCheckIcon { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the select all item text of the multi-select BitDropdown.
+    /// </summary>
+    public string? SelectAllText { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the scroll container of the BitDropdown.
     /// </summary>
@@ -152,11 +187,36 @@ public class BitDropdownClassStyles
     /// </summary>
     public string? ItemText { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the highlighted part of the item text of the BitDropdown.
+    /// </summary>
+    public string? ItemHighlight { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the item divider of the BitDropdown.
     /// </summary>
     public string? ItemDivider { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the empty state content of the BitDropdown.
+    /// </summary>
+    public string? EmptyContent { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the loading state container of the BitDropdown.
+    /// </summary>
+    public string? LoadingContainer { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the loading state text of the BitDropdown.
+    /// </summary>
+    public string? LoadingText { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the loading spinner of the BitDropdown.
+    /// </summary>
+    public string? Spinner { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the dropdown's prefix container.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownSearchMode.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownSearchMode.cs
new file mode 100644
index 0000000000..5fa2ade630
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownSearchMode.cs
@@ -0,0 +1,24 @@
+namespace Bit.BlazorUI;
+
+public enum BitDropdownSearchMode
+{
+    /// <summary>
+    /// An item matches when its text contains the search text.
+    /// </summary>
+    Contains,
+
+    /// <summary>
+    /// An item matches when its text starts with the search text.
+    /// </summary>
+    StartsWith,
+
+    /// <summary>
+    /// An item matches when its text ends with the search text.
+    /// </summary>
+    EndsWith,
+
+    /// <summary>
+    /// An item matches when its text is equal to the search text.
+    /// </summary>
+    ExactMatch
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/_BitDropdownItem.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/_BitDropdownItem.razor
index 3fe037ef25..5389d3bf01 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/_BitDropdownItem.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/_BitDropdownItem.razor
@@ -7,11 +7,22 @@
     var id = Dropdown.GetId(Item);
     var text = Dropdown.GetText(Item);
     var isHidden = Dropdown.GetIsHidden(Item);
-    var isEnabled = Dropdown.GetIsEnabled(Item);
     var isSelected = itemType == BitDropdownItemType.Normal ? Dropdown.GetIsSelected(Item) : false;
+    var isDisabled = itemType == BitDropdownItemType.Normal && Dropdown.GetIsItemDisabled(Item);
+
+    // The part of the item text that matched the search, so it can be emphasized. It is rendered as
+    // three separate pieces of text rather than as markup, so the item text is never treated as HTML.
+    // The markup below is repeated in both branches on purpose: holding it in a local RenderFragment
+    // would hand Blazor a new delegate on every render, which re-creates the item subtree and with it
+    // the click handler of the button that contains it.
+    var highlightIndex = itemType == BitDropdownItemType.Normal ? Dropdown.GetHighlightIndex(text) : -1;
+    var highlightLength = Dropdown.GetHighlightLength();
+    var highlighted = highlightIndex >= 0 && highlightLength > 0 && text is not null;
 }
 
-<div style="@Dropdown.GetStyle(Item)" class="@Dropdown.GetClass(Item)">
+@* The wrappers carry the per-item style and layout only; marking them presentational keeps the option
+   elements as the direct children of the listbox for assistive technologies. *@
+<div role="presentation" style="@Dropdown.GetStyle(Item)" class="@Dropdown.GetClass(Item)">
     @if (itemType == BitDropdownItemType.Header)
     {
         @if (Dropdown.HeaderTemplate is not null)
@@ -31,14 +42,22 @@
     {
         @if (Dropdown.MultiSelect)
         {
-            <div style="@(isHidden ? "display: none" : "") @Dropdown.Styles?.ItemWrapper"
+            <div role="presentation"
+                 style="@(isHidden ? "display: none" : "") @Dropdown.Styles?.ItemWrapper"
                  class="@Dropdown.GetItemWrapperCssClasses(Item) @Dropdown.Classes?.ItemWrapper">
                 <button @onclick="@(() => Dropdown.HandleOnItemClick(Item))"
                         id="@id"
                         type="button"
                         role="option"
+                        title="@Dropdown.GetTitle(Item)"
+                        disabled=@isDisabled
                         style="@Dropdown.Styles?.ItemButton"
-                        class="bit-drp-mcn @Dropdown.Classes?.ItemButton">
+                        class="bit-drp-mcn @Dropdown.Classes?.ItemButton"
+                        aria-label="@Dropdown.GetAriaLabel(Item)"
+                        aria-setsize="@Dropdown.GetTotalItems()"
+                        aria-disabled="@isDisabled"
+                        aria-selected="@(isSelected ? "true" : "false")"
+                        aria-posinset="@Dropdown.GetItemPosInSet(Item)">
                     <div style="@Dropdown.Styles?.ItemCheckBox"
                          class="bit-drp-chb @Dropdown.Classes?.ItemCheckBox">
                         <i aria-hidden="true"
@@ -58,9 +77,17 @@
                             <i style="@Dropdown.Styles?.ItemIcon"
                                class="bit-drp-iic @itemIcon.GetCssClasses() @Dropdown.Classes?.ItemIcon" />
                         }
-                        <span style="@Dropdown.Styles?.ItemText"
-                              class="bit-drp-itx @Dropdown.Classes?.ItemText">
-                            @text
+                        <span style="@Dropdown.Styles?.ItemText" class="bit-drp-itx @Dropdown.Classes?.ItemText">
+                            @if (highlighted)
+                            {
+                                @text!.Substring(0, highlightIndex)
+                                <span style="@Dropdown.Styles?.ItemHighlight" class="bit-drp-hlt @Dropdown.Classes?.ItemHighlight">@text!.Substring(highlightIndex, highlightLength)</span>
+                                @text!.Substring(highlightIndex + highlightLength)
+                            }
+                            else
+                            {
+                                @text
+                            }
                         </span>
                     }
                 </button>
@@ -73,13 +100,13 @@
                     type="button"
                     role="option"
                     title="@Dropdown.GetTitle(Item)"
-                    disabled=@(isEnabled is false)
-                    tabindex="@(isEnabled ? 0 : -1)"
+                    disabled=@isDisabled
+                    tabindex="@(isDisabled ? -1 : 0)"
                     style="@(isHidden ? "display:none" : "") @Dropdown.Styles?.ItemButton"
                     class="bit-drp-itm@(isSelected ? " bit-drp-sel" : "") @Dropdown.Classes?.ItemButton"
                     aria-label="@Dropdown.GetAriaLabel(Item)"
                     aria-setsize="@Dropdown.GetTotalItems()"
-                    aria-disabled="@(isEnabled is false)"
+                    aria-disabled="@isDisabled"
                     aria-selected="@(isSelected ? "true" : "false")"
                     aria-posinset="@Dropdown.GetItemPosInSet(Item)">
                 @if (Dropdown.ItemTemplate is not null)
@@ -94,9 +121,17 @@
                         <i style="@Dropdown.Styles?.ItemIcon"
                            class="bit-drp-iic @itemIcon.GetCssClasses() @Dropdown.Classes?.ItemIcon" />
                     }
-                    <span style="@Dropdown.Styles?.ItemText"
-                          class="@Dropdown.Classes?.ItemText">
-                        @text
+                    <span style="@Dropdown.Styles?.ItemText" class="bit-drp-itx @Dropdown.Classes?.ItemText">
+                        @if (highlighted)
+                        {
+                            @text!.Substring(0, highlightIndex)
+                            <span style="@Dropdown.Styles?.ItemHighlight" class="bit-drp-hlt @Dropdown.Classes?.ItemHighlight">@text!.Substring(highlightIndex, highlightLength)</span>
+                            @text!.Substring(highlightIndex + highlightLength)
+                        }
+                        else
+                        {
+                            @text
+                        }
                     </span>
                 }
             </button>
diff --git a/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DropdownsJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DropdownsJsRuntimeExtensions.cs
new file mode 100644
index 0000000000..0ba54816aa
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Extensions/JsInterop/DropdownsJsRuntimeExtensions.cs
@@ -0,0 +1,19 @@
+namespace Bit.BlazorUI;
+
+internal static class DropdownsJsRuntimeExtensions
+{
+    internal static ValueTask BitDropdownsSetup(this IJSRuntime jsRuntime, string id, string calloutId)
+    {
+        return jsRuntime.InvokeVoid("BitBlazorUI.Dropdowns.setup", id, calloutId);
+    }
+
+    internal static ValueTask BitDropdownsDispose(this IJSRuntime jsRuntime, string id)
+    {
+        return jsRuntime.InvokeVoid("BitBlazorUI.Dropdowns.dispose", id);
+    }
+
+    internal static ValueTask BitDropdownsFocusItem(this IJSRuntime jsRuntime, string calloutId, string mode, string? character, bool virtualize)
+    {
+        return jsRuntime.InvokeVoid("BitBlazorUI.Dropdowns.focusItem", calloutId, mode, character, virtualize);
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts b/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts
new file mode 100644
index 0000000000..b2ae574e37
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Scripts/Dropdowns.ts
@@ -0,0 +1,233 @@
+namespace BitBlazorUI {
+    export class Dropdowns {
+        private static _handlers = new Map<string, { element: HTMLElement, handler: (e: KeyboardEvent) => void }[]>();
+
+        // The focus of a jump mode in virtualize mode is applied after an await, so a second key press
+        // arriving in the meantime would have two invocations scrolling and focusing over each other.
+        // Each call stamps its callout with a token and gives up if a newer call has replaced it.
+        // Keyed by the element so the entry disappears with the callout instead of having to be cleaned up.
+        private static _focusGenerations = new WeakMap<HTMLElement, number>();
+
+        // The number of animation frames to wait for the items revealed by a programmatic scroll in
+        // virtualize mode to be rendered, before giving up and using whatever is rendered by then.
+        private static readonly VIRTUALIZE_RENDER_FRAMES = 20;
+
+        // The number of items PageDown/PageUp move the focus by when the whole list is rendered (in
+        // virtualize mode the jump is a scroll of one visible window instead, see _scrollFor).
+        private static readonly PAGE_STEP = 10;
+
+        // The keys whose default behavior (scrolling the page or the callout) has to be prevented
+        // because the dropdown handles them itself. They mirror the keys handled by the
+        // HandleOnTriggerKeyDown and HandleOnCalloutKeyDown methods of BitDropdown, which is where a
+        // key added to or removed from these lists has to be reflected as well.
+        private static readonly TRIGGER_KEYS = ['ArrowDown', 'ArrowUp'];
+        private static readonly CALLOUT_KEYS = ['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp'];
+
+        // These are only handled when the focus is not in the search/combo input, where they keep
+        // their caret behavior.
+        private static readonly CARET_KEYS = ['Home', 'End'];
+
+        // Attaches keydown listeners that only prevent the default behavior (e.g. page scrolling)
+        // of the navigation keys. The actual keyboard logic runs in the Blazor keydown handlers,
+        // which cannot conditionally preventDefault per key.
+        public static setup(id: string, calloutId: string) {
+            Dropdowns.dispose(id);
+
+            const entries: { element: HTMLElement, handler: (e: KeyboardEvent) => void }[] = [];
+
+            const isTextInput = (e: KeyboardEvent) => (e.target as HTMLElement)?.tagName === 'INPUT';
+
+            // Keep this in sync with IsPrintableKey of BitDropdown.
+            const isPrintable = (e: KeyboardEvent) => e.key.length === 1 && e.key !== ' ' && !e.ctrlKey && !e.altKey && !e.metaKey;
+
+            const root = document.getElementById(id);
+            if (root) {
+                const handler = (e: KeyboardEvent) => {
+                    // Buttons inside the trigger (e.g. the clear button) are activated by Space and
+                    // Enter themselves, so their keys must keep their default behavior.
+                    if ((e.target as HTMLElement)?.closest('button')) return;
+
+                    if (Dropdowns.TRIGGER_KEYS.indexOf(e.key) > -1 || (e.key === ' ' && !isTextInput(e))) {
+                        e.preventDefault();
+                    }
+                };
+                root.addEventListener('keydown', handler);
+                entries.push({ element: root, handler });
+            }
+
+            const callout = document.getElementById(calloutId);
+            if (callout) {
+                const handler = (e: KeyboardEvent) => {
+                    if (Dropdowns.CALLOUT_KEYS.indexOf(e.key) > -1 ||
+                        (Dropdowns.CARET_KEYS.indexOf(e.key) > -1 && !isTextInput(e))) {
+                        e.preventDefault();
+                        return;
+                    }
+
+                    // In ComboBox mode the input is the type-ahead, so the arrow keys having moved the
+                    // focus to an option must not stop the filtering: a printable key returns the focus
+                    // to the input, and since its default is not prevented the character lands there.
+                    if (!isTextInput(e) && isPrintable(e)) {
+                        const combo = (callout.querySelector('.bit-drp-icb') ??
+                                       root?.querySelector('.bit-drp-inp')) as HTMLElement | null;
+                        combo?.focus();
+                    }
+                };
+                callout.addEventListener('keydown', handler);
+                entries.push({ element: callout, handler });
+            }
+
+            Dropdowns._handlers.set(id, entries);
+        }
+
+        public static dispose(id: string) {
+            const entries = Dropdowns._handlers.get(id);
+            if (!entries) return;
+
+            entries.forEach(e => e.element.removeEventListener('keydown', e.handler));
+            Dropdowns._handlers.delete(id);
+        }
+
+        public static async focusItem(calloutId: string, mode: string, char: string | null, virtualize: boolean) {
+            const callout = document.getElementById(calloutId);
+            if (!callout) return;
+
+            const scroller = callout.querySelector('.bit-drp-scn') as HTMLElement | null;
+
+            const generation = (Dropdowns._focusGenerations.get(callout) ?? 0) + 1;
+            Dropdowns._focusGenerations.set(callout, generation);
+
+            let items = Dropdowns._getItems(callout);
+            if (items.length === 0) return;
+
+            let current = items.indexOf(document.activeElement as HTMLElement);
+
+            // In virtualize mode only the items around the visible window exist in the DOM, so moving
+            // beyond it means scrolling first and continuing with the items rendered afterwards.
+            if (virtualize && Dropdowns._isScrollable(scroller)) {
+                const scrolled = await Dropdowns._scrollFor(callout, scroller!, mode, items);
+
+                // A newer key press took over while the scroll was being rendered, so this one is
+                // working from an outdated window and must not move the focus back to it.
+                if (Dropdowns._focusGenerations.get(callout) !== generation) return;
+
+                if (scrolled) {
+                    items = scrolled.items;
+                    current = scrolled.items.indexOf(document.activeElement as HTMLElement);
+                    mode = scrolled.mode;
+                }
+            }
+
+            const index = Dropdowns._resolveIndex(items, current, mode, char, virtualize);
+
+            if (index > -1) {
+                items[index].focus();
+            }
+        }
+
+        // The options plus the select all item, which is not an option (it is a checkbox outside of the
+        // listbox) but still has to be reachable with the arrow keys.
+        private static _getItems(callout: HTMLElement) {
+            return (Array.from(callout.querySelectorAll('[role="option"], .bit-drp-sab')) as HTMLElement[])
+                .filter(el => !(el as HTMLButtonElement).disabled &&
+                    el.getAttribute('aria-disabled') !== 'true' &&
+                    !el.closest('.bit-drp-ids') &&
+                    el.offsetParent !== null);
+        }
+
+        private static _isScrollable(scroller: HTMLElement | null) {
+            return !!scroller && scroller.scrollHeight > scroller.clientHeight + 1;
+        }
+
+        // Scrolls the item container for the jump modes and resolves once the items revealed by the
+        // scroll have been rendered, mapping the mode to where the focus goes in the new window.
+        private static async _scrollFor(callout: HTMLElement, scroller: HTMLElement, mode: string, items: HTMLElement[]) {
+            const max = scroller.scrollHeight - scroller.clientHeight;
+
+            let top: number;
+            let nextMode = mode;
+
+            if (mode === 'first') {
+                top = 0;
+            } else if (mode === 'last') {
+                top = max;
+            } else if (mode === 'prevPage') {
+                top = scroller.scrollTop - scroller.clientHeight;
+                nextMode = 'first';
+            } else if (mode === 'nextPage') {
+                top = scroller.scrollTop + scroller.clientHeight;
+                nextMode = 'last';
+            } else {
+                // The arrow keys move one item at a time, which scrolls the focused item into view and
+                // makes virtualization render the next ones on its own.
+                return null;
+            }
+
+            top = Math.max(0, Math.min(max, top));
+            if (top === scroller.scrollTop) return null;
+
+            const first = items[0];
+            const last = items[items.length - 1];
+
+            scroller.scrollTop = top;
+
+            for (let i = 0; i < Dropdowns.VIRTUALIZE_RENDER_FRAMES; i++) {
+                await new Promise<void>(resolve => requestAnimationFrame(() => resolve()));
+
+                const rendered = Dropdowns._getItems(callout);
+                if (rendered.length > 0 && (rendered[0] !== first || rendered[rendered.length - 1] !== last)) {
+                    return { items: rendered, mode: nextMode };
+                }
+            }
+
+            return { items: Dropdowns._getItems(callout), mode: nextMode };
+        }
+
+        private static _resolveIndex(items: HTMLElement[], current: number, mode: string, char: string | null, virtualize: boolean) {
+            // Wrapping around is only correct when every item is rendered; in virtualize mode the ends
+            // of the rendered window are not the ends of the list, so the focus stops there instead.
+            const wrap = (index: number) => virtualize
+                ? Math.max(0, Math.min(items.length - 1, index))
+                : (index + items.length) % items.length;
+
+            if (mode === 'first') return 0;
+
+            if (mode === 'last') return items.length - 1;
+
+            if (mode === 'next') return current < 0 ? 0 : wrap(current + 1);
+
+            if (mode === 'prev') return current < 0 ? items.length - 1 : wrap(current - 1);
+
+            if (mode === 'nextPage') return current < 0 ? 0 : Math.min(current + Dropdowns.PAGE_STEP, items.length - 1);
+
+            if (mode === 'prevPage') return current < 0 ? items.length - 1 : Math.max(current - Dropdowns.PAGE_STEP, 0);
+
+            if (mode === 'selected') {
+                // Focus the selected option if there is one, otherwise the first one (APG combobox pattern).
+                const index = items.findIndex(el => el.classList.contains('bit-drp-sel') || el.getAttribute('aria-selected') === 'true');
+                return index < 0 ? 0 : index;
+            }
+
+            if (mode === 'char' && char) {
+                // Type-ahead per the APG: a repeated single character cycles through the options starting
+                // with it, while a multi-character buffer matches the accumulated string without leaving
+                // the current option (so typing a longer prefix refines the match instead of jumping).
+                const buffer = char.toLowerCase();
+                const sameChar = buffer.split('').every(c => c === buffer[0]);
+                const query = sameChar ? buffer[0] : buffer;
+                const start = current < 0 ? 0 : (sameChar ? current + 1 : current);
+                for (let i = 0; i < items.length; i++) {
+                    const candidate = (start + i) % items.length;
+                    // The select all item is not an option, so its text must not be matched.
+                    if (items[candidate].getAttribute('role') !== 'option') continue;
+
+                    if ((items[candidate].textContent || '').trim().toLowerCase().indexOf(query) === 0) {
+                        return candidate;
+                    }
+                }
+            }
+
+            return -1;
+        }
+    }
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor
index 0040ae1ace..4fefd01042 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor
@@ -3,12 +3,12 @@
 
 <PageOutlet Url="components/dropdown"
             Title="Dropdown"
-            Description="A dropdown is a list in which the selected item is always visible while other items are visible on demand by clicking a dropdown button." />
+            Description="BitDropdown is a full-featured select component for picking one or more options: a searchable callout with full keyboard navigation and typeahead, select all, selection limit, loading and empty states, a ComboBox mode with chips and dynamic item addition, virtualization and on-demand loading for large datasets, rich templates for every part, form validation, three sizes, a responsive mobile panel and RTL." />
 
 <div>
     <DemoPage Name="Dropdown"
               SecondaryNames="@(["Select", "MultiSelect", "ComboBox"])"
-              Description="A dropdown is a list in which the selected item is always visible while other items are visible on demand by clicking a dropdown button. Dropdowns are typically used for forms."
+              Description="BitDropdown (also known as Select, MultiSelect or ComboBox) lets users pick one or more options from a list that opens on demand, and stays fully operable with the keyboard and with a screen reader. Beyond the basics, it offers a searchable callout with typeahead and a customizable search algorithm, select all with an indeterminate state, a selection limit, distinct loading, empty and no-results states, a ComboBox mode with free typing, chips and dynamic item addition, virtualization and on-demand loading for large datasets, templates for every part of the component, EditForm validation, three sizes, a swipeable panel on small screens and RTL support."
               Parameters="componentParameters"
               SubClasses="componentSubClasses"
               SubEnums="componentSubEnums"
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
index 08d8f2ab5a..0fa976a5ea 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.cs
@@ -6,6 +6,13 @@ public partial class BitDropdownDemo
 
     private readonly List<ComponentParameter> componentParameters =
     [
+        new()
+        {
+            Name = "AutoClearSearch",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Clears the typed search text after each selection in the multi select ComboBox mode, so the next item is picked from the full list instead of from the previous filter.",
+        },
         new()
         {
             Name = "AutoFocusSearchBox",
@@ -14,6 +21,20 @@ public partial class BitDropdownDemo
             Description = "Enables auto-focusing of the SearchBox input when the callout is open.",
         },
         new()
+        {
+            Name = "HideSelectedItems",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Removes the already selected items from the callout, which suits a multi select dropdown whose selection is visible as chips and whose list is therefore only about what is left to pick.",
+        },
+        new()
+        {
+            Name = "HighlightSearch",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Highlights the part of the item text that matched the current search text in the callout. Only applies to the default item rendering, not to a custom ItemTemplate.",
+        },
+        new()
         {
             Name = "CalloutFooterTemplate",
             Type = "RenderFragment?",
@@ -173,6 +194,20 @@ public partial class BitDropdownDemo
             Description = "The function for generating value in a custom item when a new item is on added Dynamic ComboBox mode.",
         },
         new()
+        {
+            Name = "EmptyTemplate",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "The custom template to render in the callout when there is no item to show.",
+        },
+        new()
+        {
+            Name = "EmptyText",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The text to render in the callout when there is no item to show.",
+        },
+        new()
         {
             Name = "ExistsSelectedItemFunction",
             Type = "Func<ICollection<TItem>, string, bool>",
@@ -213,6 +248,13 @@ public partial class BitDropdownDemo
             Description = "Searches the items immediately as the user types in the search box or combo box input (based on the 'oninput' HTML event).",
         },
         new()
+        {
+            Name = "IsLoading",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Shows a loading indicator in the callout (and in place of the caret down element) while the items are being fetched. The dropdown stays interactive, so the user can still open the callout and see the loading state.",
+        },
+        new()
         {
             Name = "IsOpen",
             Type = "bool",
@@ -259,6 +301,13 @@ public partial class BitDropdownDemo
             Description = "The function providing items to the list for virtualization.",
         },
         new()
+        {
+            Name = "ItemsProviderDebounceTime",
+            Type = "int",
+            DefaultValue = "100",
+            Description = "The delay in milliseconds before an ItemsProvider request is issued, which collapses the bursts of requests produced by fast scrolling and typing into a single one.",
+        },
+        new()
         {
             Name = "ItemTemplate",
             Type = "RenderFragment<TItem>?",
@@ -280,6 +329,41 @@ public partial class BitDropdownDemo
             Description = "The custom template for the label of the dropdown.",
         },
         new()
+        {
+            Name = "LoadingTemplate",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "The custom template to render in the callout in place of the items while IsLoading is enabled.",
+        },
+        new()
+        {
+            Name = "LoadingText",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The text to render in the callout in place of the items while IsLoading is enabled. Defaults to \"Loading...\".",
+        },
+        new()
+        {
+            Name = "MaxSelectedItems",
+            Type = "int?",
+            DefaultValue = "null",
+            Description = "The maximum number of items that can be selected in multi select mode. A value that is not greater than zero (and null) means no limit.",
+        },
+        new()
+        {
+            Name = "MaxDisplayedItems",
+            Type = "int?",
+            DefaultValue = "null",
+            Description = "The maximum number of selected items rendered in the dropdown itself. Beyond it, the chips display collapses the extra ones into an overflow indicator and the text display switches to a summary. Zero or null renders every selected item.",
+        },
+        new()
+        {
+            Name = "MinSearchLength",
+            Type = "int",
+            DefaultValue = "0",
+            Description = "The number of characters the search text must reach before the items get filtered. While the search text is shorter, the full list is shown and no search is performed.",
+        },
+        new()
         {
             Name = "MultiSelect",
             Type = "bool",
@@ -310,18 +394,50 @@ public partial class BitDropdownDemo
             Description = "Removes the border from the root element.",
         },
         new()
+        {
+            Name = "NoResultsTemplate",
+            Type = "RenderFragment?",
+            DefaultValue = "null",
+            Description = "The custom template to render in the callout when the current search has no result. Falls back to the EmptyTemplate when not set.",
+        },
+        new()
+        {
+            Name = "NoResultsText",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The text to render in the callout when the current search has no result. Falls back to the EmptyText when not set.",
+        },
+        new()
+        {
+            Name = "OnClear",
+            Type = "EventCallback",
+            Description = "The callback that is called when the selection gets cleared by the clear button.",
+        },
+        new()
         {
             Name = "OnClick",
             Type = "EventCallback<MouseEventArgs>",
             Description = "The click callback for the dropdown.",
         },
         new()
+        {
+            Name = "OnClose",
+            Type = "EventCallback",
+            Description = "The callback that is called when the callout gets closed.",
+        },
+        new()
         {
             Name = "OnDynamicAdd",
-            Type = "EventCallback<string>",
+            Type = "EventCallback<TItem>",
             Description = "The callback that is called when a new item is on added Dynamic ComboBox mode.",
         },
         new()
+        {
+            Name = "OnOpen",
+            Type = "EventCallback",
+            Description = "The callback that is called when the callout gets opened.",
+        },
+        new()
         {
             Name = "OnSearch",
             Type = "EventCallback<string>",
@@ -340,6 +456,13 @@ public partial class BitDropdownDemo
             Description = "The callback that called when selected items change.",
         },
         new()
+        {
+            Name = "OverflowTextFormat",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The composite format of the overflow indicator that stands for the selected items beyond MaxDisplayedItems in the chips display, for example \"+{0}\".",
+        },
+        new()
         {
             Name = "Options",
             Type = "RenderFragment?",
@@ -462,7 +585,37 @@ public partial class BitDropdownDemo
             Name = "SearchFunction",
             Type = "Func<ICollection<TItem>, string, ICollection<TItem>>?",
             DefaultValue = "null",
-            Description = "Custom search function to be used in place of the default search algorithm.",
+            Description = "Custom search function to be used in place of the default search algorithm. Takes precedence over SearchMode, which only configures the default algorithm.",
+        },
+        new()
+        {
+            Name = "SearchMode",
+            Type = "BitDropdownSearchMode",
+            DefaultValue = "BitDropdownSearchMode.Contains",
+            Description = "Determines how the text of an item is matched against the search text by the default (case-insensitive) search algorithm. Ignored when a SearchFunction is provided.",
+            LinkType = LinkType.Link,
+            Href = "#search-mode-enum",
+        },
+        new()
+        {
+            Name = "SearchResultsText",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The composite format of the message announced to screen readers with the number of items the current search produced, for example \"{0} results available\". Defaults to the English message.",
+        },
+        new()
+        {
+            Name = "SelectAllText",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The text of the select all item in multi select mode.",
+        },
+        new()
+        {
+            Name = "SelectedItemsTextFormat",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The composite format that replaces the joined item texts in the dropdown once more than MaxDisplayedItems items are selected, for example \"{0} items selected\".",
         },
         new()
         {
@@ -479,6 +632,22 @@ public partial class BitDropdownDemo
             Description = "Shows the SearchBox element in the callout.",
         },
         new()
+        {
+            Name = "ShowSelectAll",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Shows the select all item in the callout in multi select mode. It has no effect when the items are provided by an ItemsProvider, since the items that are not loaded yet cannot be selected.",
+        },
+        new()
+        {
+            Name = "Size",
+            Type = "BitSize?",
+            DefaultValue = "null",
+            Description = "The size of the dropdown.",
+            LinkType = LinkType.Link,
+            Href = "#size-enum",
+        },
+        new()
         {
             Name = "Styles",
             Type = "BitDropdownClassStyles?",
@@ -1091,6 +1260,41 @@ public partial class BitDropdownDemo
                    Description = "Custom CSS classes/styles for the search box input of the BitDropdown."
                },
                new()
+               {
+                   Name = "ComboBoxInput",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the ComboBox input of the BitDropdown."
+               },
+               new()
+               {
+                   Name = "Chips",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the chips container of the BitDropdown."
+               },
+               new()
+               {
+                   Name = "OverflowChip",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the overflow chip of the BitDropdown."
+               },
+               new()
+               {
+                   Name = "ChipsRemoveButton",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the chips's remove button of the BitDropdown."
+               },
+               new()
+               {
+                   Name = "ChipsRemoveIcon",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the chips's remove icon of the BitDropdown."
+               },
+               new()
                {
                    Name = "SearchBoxClearButtonContainer",
                    Type = "string?",
@@ -1112,6 +1316,41 @@ public partial class BitDropdownDemo
                    Description = "Custom CSS classes/styles for the search box's clear icon of the BitDropdown."
                },
                new()
+               {
+                   Name = "SelectAllContainer",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the select all item container of the multi-select BitDropdown."
+               },
+               new()
+               {
+                   Name = "SelectAllButton",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the select all item button of the multi-select BitDropdown."
+               },
+               new()
+               {
+                   Name = "SelectAllCheckBox",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the select all item check box of the multi-select BitDropdown."
+               },
+               new()
+               {
+                   Name = "SelectAllCheckIcon",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the select all item check icon of the multi-select BitDropdown."
+               },
+               new()
+               {
+                   Name = "SelectAllText",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the select all item text of the multi-select BitDropdown."
+               },
+               new()
                {
                    Name = "ScrollContainer",
                    Type = "string?",
@@ -1168,12 +1407,89 @@ public partial class BitDropdownDemo
                    Description = "Custom CSS classes/styles for the item text of the BitDropdown."
                },
                new()
+               {
+                   Name = "ItemHighlight",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the highlighted part of the item text of the BitDropdown."
+               },
+               new()
                {
                    Name = "ItemDivider",
                    Type = "string?",
                    DefaultValue = "null",
                    Description = "Custom CSS classes/styles for the item divider of the BitDropdown."
                },
+               new()
+               {
+                   Name = "EmptyContent",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the empty state content of the BitDropdown."
+               },
+               new()
+               {
+                   Name = "LoadingContainer",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the loading state container of the BitDropdown."
+               },
+               new()
+               {
+                   Name = "LoadingText",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the loading state text of the BitDropdown."
+               },
+               new()
+               {
+                   Name = "Spinner",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the loading spinner of the BitDropdown."
+               },
+               new()
+               {
+                   Name = "PrefixContainer",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the dropdown's prefix container."
+               },
+               new()
+               {
+                   Name = "Prefix",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the dropdown's prefix."
+               },
+               new()
+               {
+                   Name = "SuffixContainer",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the dropdown's suffix container."
+               },
+               new()
+               {
+                   Name = "Suffix",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the dropdown's suffix."
+               },
+               new()
+               {
+                   Name = "ResponsiveComboInputContainer",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the ComboBox input container in responsive mode of the BitDropdown."
+               },
+               new()
+               {
+                   Name = "ResponsiveComboAddButton",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the add new item combo box button in responsive mode of the BitDropdown."
+               },
             ],
         }
     ];
@@ -1206,6 +1522,66 @@ public partial class BitDropdownDemo
             ]
         },
         new()
+        {
+            Id = "search-mode-enum",
+            Name = "BitDropdownSearchMode",
+            Description = "Determines how the text of an item is matched against the search text.",
+            Items =
+            [
+                new()
+                {
+                    Name = "Contains",
+                    Description = "An item matches when its text contains the search text.",
+                    Value = "0",
+                },
+                new()
+                {
+                    Name = "StartsWith",
+                    Description = "An item matches when its text starts with the search text.",
+                    Value = "1",
+                },
+                new()
+                {
+                    Name = "EndsWith",
+                    Description = "An item matches when its text ends with the search text.",
+                    Value = "2",
+                },
+                new()
+                {
+                    Name = "ExactMatch",
+                    Description = "An item matches when its text is equal to the search text.",
+                    Value = "3",
+                }
+            ]
+        },
+        new()
+        {
+            Id = "size-enum",
+            Name = "BitSize",
+            Description = "Defines the sizes available in the bit BlazorUI.",
+            Items =
+            [
+                new()
+                {
+                    Name = "Small",
+                    Description = "The small size.",
+                    Value = "0",
+                },
+                new()
+                {
+                    Name = "Medium",
+                    Description = "The medium size.",
+                    Value = "1",
+                },
+                new()
+                {
+                    Name = "Large",
+                    Description = "The large size.",
+                    Value = "2",
+                }
+            ]
+        },
+        new()
         {
             Id = "color-enum",
             Name = "BitColor",
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.scss
index 488cb510de..22bdc235e4 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/BitDropdownDemo.razor.scss
@@ -86,6 +86,12 @@
             color: #ff4600;
             font-weight: bold;
         }
+
+        &.custom-drp-empty {
+            color: orangered;
+            padding: 5px 12px;
+            justify-content: center;
+        }
     }
 
     .grid-wrap {
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
index f1989a31fa..492f6d8406 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor
@@ -1,5 +1,13 @@
 <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
-    <div>Displays basic dropdowns demonstrating single and multi-select options, including required and disabled states.</div>
+    <div>
+        BitDropdown in its simplest forms: single and multi select dropdowns, a required one (which marks its label and
+        reports itself as required to assistive technologies), one preserving its original callout width instead of
+        matching the width of the dropdown, and a custom delimiter for joining the selected values in multi select mode.
+        A <b>disabled</b> dropdown cannot be focused or opened at all, while a <b>read-only</b> one stays focusable and
+        its callout can still be browsed &mdash; only changing the selection is blocked, and every control that would
+        change it (the clear button, the chip remove buttons) is hidden accordingly.
+        The <b>Title</b> parameter adds the tooltip shown while the pointer rests on the dropdown.
+    </div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Single select"
@@ -30,11 +38,38 @@
                      DefaultValue="@("f-ora")"
                      Placeholder="Select an item"
                      NameSelectors="nameSelectors" />
+        <br /><br />
+        <BitDropdown Label="ReadOnly"
+                     ReadOnly
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@("f-app")"
+                     Placeholder="Select an item"
+                     NameSelectors="nameSelectors" />
+        <br /><br />
+        <BitDropdown Label="Custom delimiter"
+                     MultiSelect
+                     MultiSelectDelimiter=" - "
+                     Items="GetBasicCustoms()"
+                     DefaultValues="@(new[] { "f-app", "f-ban" })"
+                     Placeholder="Select items"
+                     NameSelectors="nameSelectors" />
+        <br /><br />
+        <BitDropdown Label="Title"
+                     Title="Pick your favorite fruit or vegetable"
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Hover me" />
     </div>
 </DemoExample>
 
 <DemoExample Title="Prefix & Suffix" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2" PreventRenderForMcpClient>
-    <div>Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.</div>
+    <div>
+        The <b>Prefix</b> and <b>Suffix</b> parameters put fixed text before and after the selected value &mdash; a
+        unit, a currency, a category &mdash; and <b>PrefixTemplate</b> and <b>SuffixTemplate</b> replace them with any
+        content, an icon for instance. They are decoration only: they are not part of the value and are not read out
+        with it, so keep a descriptive <b>Label</b> for screen reader users.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Prefix"
@@ -56,6 +91,18 @@
                      NameSelectors="nameSelectors"
                      Placeholder="Select an item" />
         <br /><br />
+        <BitDropdown Label="Templates"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item">
+            <PrefixTemplate>
+                <BitIcon IconName="@BitIconName.ShoppingCart" Style="padding-inline:0.5rem" />
+            </PrefixTemplate>
+            <SuffixTemplate>
+                <BitIcon IconName="@BitIconName.Info" Style="padding-inline:0.5rem" />
+            </SuffixTemplate>
+        </BitDropdown>
+        <br /><br />
         <BitDropdown Label="Disabled"
                      Prefix="Fruits:"
                      Suffix="kg"
@@ -67,7 +114,11 @@
 </DemoExample>
 
 <DemoExample Title="FitWidth" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3" PreventRenderForMcpClient>
-    <div>Enables fit-content width for the dropdown that sets the width of the component based on its content size.</div>
+    <div>
+        The <b>FitWidth</b> parameter makes the dropdown only as wide as its content instead of stretching to the full
+        width of its container, which suits toolbars and inline filters where a full-width control would look out of
+        place. The callout still matches the width of the dropdown unless <b>PreserveCalloutWidth</b> is set.
+    </div>
     <br /><br />
     <BitDropdown Label="Single select"
                  FitWidth
@@ -83,8 +134,12 @@
                  NameSelectors="nameSelectors" />
 </DemoExample>
 
-<DemoExample Title="NoBorder" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4" PreventRenderForMcpClient>
-    <div>The dropdown can be rendered without any border.</div>
+<DemoExample Title="NoBorder & Transparent" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4" PreventRenderForMcpClient>
+    <div>
+        The <b>NoBorder</b> parameter removes the border of the dropdown and <b>Transparent</b> removes its background,
+        so the control can sit on a colored or image surface without cutting a box out of it. They are independent and
+        combine freely; the callout keeps its own surface either way, so the items stay readable.
+    </div>
     <br /><br />
     <div style="max-width:10rem">
         <BitDropdown NoBorder
@@ -97,11 +152,23 @@
                      Items="GetBasicCustoms()"
                      Placeholder="Select items"
                      NameSelectors="nameSelectors" />
+        <br /><br />
+        <div style="padding:0.5rem;border-radius:0.5rem;background:linear-gradient(90deg,#ff00cc7f,#3333997f)">
+            <BitDropdown Transparent
+                         Items="GetBasicCustoms()"
+                         Placeholder="Select an item"
+                         NameSelectors="nameSelectors" />
+        </div>
     </div>
 </DemoExample>
 
 <DemoExample Title="Responsive" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5" PreventRenderForMcpClient>
-    <div>When the <b>IsResponsive</b> parameter is true, on small screens the drop down items will render in a side panel.</div>
+    <div>
+        When the <b>Responsive</b> parameter is true, the callout turns into a side panel on small screens instead of a
+        floating list, making long item lists easier to use on mobile devices. The panel carries the label of the
+        dropdown and a close button, and it can also be dismissed by swiping it away. Resize the window below the small
+        breakpoint to see it.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Responsive Dropdown"
@@ -113,7 +180,13 @@
 </DemoExample>
 
 <DemoExample Title="Drop direction" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6" PreventRenderForMcpClient>
-    <div>Explores different drop directions for the BitDropdown component, including automatic and explicit directions.</div>
+    <div>
+        The <b>DropDirection</b> parameter determines which directions the callout is allowed to open in. <b>All</b>
+        picks whichever side fits best in the viewport, while <b>TopAndBottom</b> (the default) restricts it to opening
+        above or below the dropdown. In both cases the callout flips to the opposite side when there is not enough room,
+        and its item list is capped to the space that is actually available, so it never runs past the edge of the
+        screen. Scroll the page so that these dropdowns sit near the top or the bottom of the viewport to see it.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="All"
@@ -131,7 +204,12 @@
 </DemoExample>
 
 <DemoExample Title="Clear button" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7" PreventRenderForMcpClient>
-    <div>Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.</div>
+    <div>
+        The <b>ShowClearButton</b> parameter adds a button that clears the current selection whenever the dropdown has
+        a value, in both single and multi select modes. Clearing raises the usual value change events, plus the
+        dedicated <b>OnClear</b> callback. The button is hidden while the dropdown is read-only or disabled, so it
+        never offers an action that would be ignored.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="clearValue"
@@ -152,11 +230,29 @@
                      NameSelectors="nameSelectors" />
         <br />
         <div>Values: @string.Join(',', clearValues)</div>
+        <br /><br /><br /><br />
+        <div><b>OnClear</b>:</div><br />
+        <BitDropdown ShowClearButton
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@("f-app")"
+                     NameSelectors="nameSelectors"
+                     Label="Single select dropdown"
+                     Placeholder="Select an option"
+                     OnClear="() => clearCounter++" />
+        <br />
+        <div>OnClear count: @clearCounter</div>
     </div>
 </DemoExample>
 
 <DemoExample Title="SearchBox" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8" PreventRenderForMcpClient>
-    <div>Examples of dropdowns with search functionality, including default and custom search functions.</div>
+    <div>
+        The <b>ShowSearchBox</b> parameter adds a search input at the top of the callout to filter the items, and
+        <b>SearchBoxPlaceholder</b> sets its placeholder. By default an item matches when its text contains the typed
+        term, ignoring case; <b>SearchFunction</b> replaces that algorithm with any predicate of your own (the examples
+        below switch it to a starts-with and an ends-with match). <b>AutoFocusSearchBox</b> puts the caret in the search
+        input as soon as the callout opens, so typing filters right away. The search term is discarded whenever the
+        callout closes, so the next opening always starts from the full list.
+    </div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Single select & auto focus"
@@ -200,11 +296,67 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Immediate search" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9" PreventRenderForMcpClient>
+<DemoExample Title="Search options" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9" PreventRenderForMcpClient>
+    <div>
+        Three parameters tune the default search without replacing it. <b>SearchMode</b> picks how the text of an item
+        is matched against the typed term &mdash; <b>Contains</b> (the default), <b>StartsWith</b>, <b>EndsWith</b> or
+        <b>ExactMatch</b>, always ignoring case. <b>MinSearchLength</b> holds the filtering back until the term reaches the
+        given number of characters, which keeps a one-letter term from being treated as a real query (and, with an
+        <b>ItemsProvider</b>, from turning every first keystroke into a request). <b>HighlightSearch</b> emphasizes the
+        matched part of each item text so the reason an item is in the result is visible at a glance. Whenever a search
+        is active the number of results is also announced to screen readers, with a message you can localize through
+        the <b>SearchResultsText</b> parameter.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="SearchMode: StartsWith"
+                     ShowSearchBox
+                     AutoFocusSearchBox
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Type a first letter"
+                     SearchMode="BitDropdownSearchMode.StartsWith" />
+        <br /><br />
+        <BitDropdown Label="MinSearchLength: 3"
+                     ShowSearchBox
+                     AutoFocusSearchBox
+                     MinSearchLength="3"
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Type at least 3 characters" />
+        <br /><br />
+        <BitDropdown Label="HighlightSearch"
+                     ShowSearchBox
+                     AutoFocusSearchBox
+                     HighlightSearch
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search item" />
+        <br /><br />
+        <BitDropdown Label="Highlight in the ComboBox"
+                     Combo
+                     HighlightSearch
+                     Items="comboBoxCustoms"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="comboBoxNameSelectors"
+                     Placeholder="Type to filter" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Immediate search" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10" PreventRenderForMcpClient>
     <div>
-        By default, the search and combo box inputs raise their search as you commit the input (on the change event).
-        Enabling <b>Immediate</b> makes the search happen as you type (on the input event). You can also rate-limit the
-        immediate search using <b>DebounceTime</b> or <b>ThrottleTime</b> (in milliseconds).
+        By default the search box raises its search when the input is committed (on the change event). Enabling
+        <b>Immediate</b> makes it search as you type (on the input event) instead. Because that can mean a request per
+        keystroke with a remote data source, the immediate search can be rate-limited: <b>DebounceTime</b> waits until
+        the typing pauses for the given number of milliseconds and then searches once, while <b>ThrottleTime</b> lets
+        at most one search through per interval while the typing continues. The <b>OnSearch</b> event reports every
+        search term that gets through.
     </div>
     <br /><br />
     <div class="example-content">
@@ -239,8 +391,13 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Validation" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10" PreventRenderForMcpClient>
-    <div>Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.</div>
+<DemoExample Title="Validation" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11" PreventRenderForMcpClient>
+    <div>
+        BitDropdown is a regular form input: inside an <b>EditForm</b> it takes part in data annotations validation,
+        turns red and reports itself as invalid to assistive technologies when its field has an error, and renders a
+        <b>ValidationMessage</b> like any other input. This example requires a value in the single select dropdown and
+        keeps the number of selected items of the multi select one within a range.
+    </div>
     <br />
     <div class="example-content">
         @if (string.IsNullOrEmpty(successMessage))
@@ -279,8 +436,17 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Customization" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
-    <div>Shows how to customize dropdowns using templates for header, text, item, placeholder, label, and callout sections.</div>
+<DemoExample Title="Customization" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+    <div>
+        Nearly every part of the dropdown can be replaced with your own content. <b>ItemTemplate</b> and
+        <b>HeaderTemplate</b> render the normal items and the group headers of the callout, <b>TextTemplate</b> renders
+        the selected value shown on the closed dropdown and <b>PlaceholderTemplate</b> what is shown while nothing is
+        selected, <b>LabelTemplate</b> replaces the label, <b>CaretDownIconName</b> and <b>CaretDownTemplate</b> the
+        chevron, and <b>CalloutHeaderTemplate</b> and <b>CalloutFooterTemplate</b> add fixed content above and below the
+        scrollable item list &mdash; the footer being the usual home of an "add a new item" action. The templates that
+        render an item receive the item itself, so the extra state carried in its <b>Data</b> property is available to
+        them.
+    </div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Header template"
@@ -343,6 +509,15 @@
                      Placeholder="Select an item"
                      CaretDownIconName="@BitIconName.ScrollUpDown" />
         <br /><br />
+        <BitDropdown Label="CaretDownTemplate"
+                     Items="GetDataCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item">
+            <CaretDownTemplate>
+                <BitIcon IconName="@BitIconName.FavoriteStar" Style="font-size:0.875rem" />
+            </CaretDownTemplate>
+        </BitDropdown>
+        <br /><br />
         <BitDropdown Label="Callout templates"
                      Items="GetDataCustoms()"
                      NameSelectors="nameSelectors"
@@ -357,11 +532,20 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Binding" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
-    <div>Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.</div>
+<DemoExample Title="Binding" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+    <div>
+        Every piece of the dropdown's state can be bound or observed. The selection is two-way bound over <b>Value</b>
+        in single select mode and <b>Values</b> in multi select mode, or left uncontrolled with <b>DefaultValue</b> and
+        <b>DefaultValues</b> and observed through the <b>OnChange</b> and <b>OnValuesChange</b> events;
+        <b>OnSelectItem</b> hands over the clicked item itself rather than its value. <b>Reselectable</b> makes the
+        select events fire even when the already selected item is picked again, which is otherwise treated as a no-op.
+        The open state of the callout is two-way bound via <b>IsOpen</b>, so it can be opened and closed from code, and
+        the <b>OnOpen</b> and <b>OnClose</b> events report every change to it &mdash; a natural place to start fetching
+        the items on first open.
+    </div>
     <br /><br />
     <div class="example-content">
-        <div>Two-way binding:</div><br />
+        <div><b>Two-way binding</b>:</div><br />
         <BitDropdown @bind-Value="controlledValue"
                      Label="Single select"
                      Items="GetBasicCustoms()"
@@ -379,7 +563,7 @@
         <br />
         <div>Selected Values: @string.Join(",", controlledValues)</div>
         <br /><br /><br /><br />
-        <div>OnChange:</div><br />
+        <div><b>OnChange</b>:</div><br />
         <BitDropdown Label="Single select"
                      Items="GetBasicCustoms()"
                      Placeholder="Select an item"
@@ -399,7 +583,7 @@
         <br />
         <div>Changed Values: @string.Join(",", changedValues)</div>
         <br /><br /><br /><br />
-        <div>OnSelectItem:</div><br />
+        <div><b>OnSelectItem</b>:</div><br />
         <BitDropdown Label="Single select"
                      Items="GetBasicCustoms()"
                      DefaultValue="@string.Empty"
@@ -418,11 +602,49 @@
                      OnSelectItem="(Product item) => selectedItem2 = item" />
         <br />
         <div>Selected Value: @selectedItem2?.Value</div>
+        <br /><br /><br /><br />
+        <div><b>Reselectable</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Reselectable
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     NameSelectors="nameSelectors"
+                     OnSelectItem="(Product item) => selectItemCounter++" />
+        <br />
+        <div>OnSelectItem count: @selectItemCounter</div>
+        <br /><br /><br /><br />
+        <div><b>IsOpen</b>:</div><br />
+        <BitButton OnClick="() => isDropdownOpen = true">Open the dropdown</BitButton>
+        <br /><br />
+        <BitDropdown @bind-IsOpen="isDropdownOpen"
+                     Label="Single select"
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     NameSelectors="nameSelectors" />
+        <br /><br /><br /><br />
+        <div><b>OnOpen & OnClose</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     NameSelectors="nameSelectors"
+                     OnOpen="HandleOnCalloutOpen"
+                     OnClose="HandleOnCalloutClose" />
+        <br />
+        <div>The callout is @calloutState.</div>
     </div>
 </DemoExample>
 
-<DemoExample Title="ComboBox" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
-    <div>When the <b>Combo</b> parameter is true, you can type in BitDropdown input and search between items.</div>
+<DemoExample Title="ComboBox" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
+    <div>
+        The <b>Combo</b> parameter turns the dropdown into a ComboBox: an editable input renders in place of the selected
+        text and filters the items as you type, so the trigger doubles as the search box. <b>Enter</b> selects the item
+        whose text matches what was typed, <b>Backspace</b> on an empty input removes the last selected item, the arrow
+        keys open the callout, and a term that was typed but never turned into a selection is discarded when the callout
+        closes, so the input goes back to showing the current selection.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample1"
@@ -448,8 +670,12 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Chips" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
-    <div>When the <b>Chips</b> parameter is true, shows the selected items like chips in the ComboBox.</div>
+<DemoExample Title="Chips" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
+    <div>
+        When the <b>Chips</b> parameter is true, the selected items render as chips inside the dropdown instead of one
+        joined text, each with its own remove button that is reachable with the keyboard and announced with the text of
+        the item it removes. It works in both single and multi select modes and pairs naturally with the ComboBox mode.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample2"
@@ -475,8 +701,79 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Dynamic ComboBox" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
-    <div>When the <b>Dynamic</b> parameter is true, you can add a new item in the ComboBox.</div>
+<DemoExample Title="Selection display" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16" PreventRenderForMcpClient>
+    <div>
+        A multi select dropdown that lists every selected item quickly runs out of room. <b>MaxDisplayedItems</b> caps
+        how many of them the closed dropdown shows: with <b>Chips</b> the extra ones collapse into an overflow chip
+        whose text comes from <b>OverflowTextFormat</b> (<b>"+{0}"</b> by default), and without chips the joined list
+        is replaced by the summary of <b>SelectedItemsTextFormat</b> (<b>"{0} items selected"</b> by default) as soon
+        as the limit is passed. Nothing is removed from the selection &mdash; only the way it is displayed changes.
+        <br /><br />
+        <b>AutoClearSearch</b> covers the other half of a multi select session: the callout stays open after a pick, so
+        by default the next item has to be found through the filter left over from the previous one. Enabling it clears
+        the search text after every selection instead.
+        <b>HideSelectedItems</b> goes one step further and drops the picked items out of the callout altogether, which
+        makes sense when the chips already show what is selected and the list is only about what is left to choose.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="MaxDisplayedItems (chips)"
+                     Chips
+                     MultiSelect
+                     MaxDisplayedItems="2"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban", "f-gra", "v-car" })" />
+        <br /><br />
+        <BitDropdown Label="OverflowTextFormat"
+                     Chips
+                     MultiSelect
+                     MaxDisplayedItems="2"
+                     OverflowTextFormat="and {0} more"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban", "f-gra", "v-car" })" />
+        <br /><br />
+        <BitDropdown Label="SelectedItemsTextFormat"
+                     MultiSelect
+                     MaxDisplayedItems="2"
+                     SelectedItemsTextFormat="{0} fruits and vegetables"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban", "f-gra", "v-car" })" />
+        <br /><br />
+        <BitDropdown Label="AutoClearSearch"
+                     Combo Chips
+                     MultiSelect
+                     AutoClearSearch
+                     Items="comboBoxCustoms"
+                     NameSelectors="comboBoxNameSelectors"
+                     DefaultValues="@(Array.Empty<string>())"
+                     Placeholder="Type to filter, then pick" />
+        <br /><br />
+        <BitDropdown Label="HideSelectedItems"
+                     Chips
+                     MultiSelect
+                     HideSelectedItems
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban" })" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Dynamic ComboBox" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17">
+    <div>
+        When the <b>Dynamic</b> parameter is true, a text typed into the ComboBox that matches no existing item can be
+        added as a new one, which is what makes free-form values (tags, e-mail recipients, ad-hoc categories) possible.
+        <b>DynamicValueGenerator</b> produces the value of the new item from its text and <b>OnDynamicAdd</b> notifies
+        about the addition so the item can be persisted into the source collection. Before creating anything the
+        component first looks for an existing match; <b>FindItemFunction</b> and <b>ExistsSelectedItemFunction</b>
+        replace the default case-insensitive text comparison used for those two lookups.
+    </div>
     <div class="example-content">
         <br />
         <BitDropdown @bind-Value="comboBoxValueSample3"
@@ -491,7 +788,7 @@
         <div>Value: @comboBoxValueSample3</div>
     </div>
     <br /><br /><br /><br />
-    <div>When the <b>Combo</b>, <b>Chips</b> and <b>Dynamic</b> parameters are true, you can add a new item in the ComboBox (pressing the enter key or touching the add button on the mobile).</div>
+    <div>Combining the <b>Combo</b>, <b>Chips</b> and <b>Dynamic</b> parameters, new items get added by pressing the enter key (or the add button of the responsive panel on mobile) and render as removable chips.</div>
     <br />
     <div class="example-content">
         <br />
@@ -522,81 +819,288 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
+<DemoExample Title="Keyboard navigation" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18" PreventRenderForMcpClient>
     <div>
-        Use icons from external libraries like FontAwesome and Bootstrap Icons with the <b>CaretDownIcon</b>, 
-        <b>ClearButtonIcon</b>, <b>ChipsRemoveIcon</b>, <b>SearchBoxIcon</b>, <b>SearchBoxClearIcon</b>, and 
-        <b>ResponsiveCloseIcon</b> parameters on the dropdown and the <b>Icon</b> or <b>IconName</b> 
-        properties on custom type.
+        The dropdown is fully operable with the keyboard, following the ARIA authoring practices for a combobox:
+        <b>Enter</b>, <b>Space</b> and the arrow keys open the callout and put the focus on the selected item (or the
+        first one), <b>ArrowUp</b> and <b>ArrowDown</b> move between the items, <b>Home</b> and <b>End</b> jump to the
+        first and the last one, <b>PageUp</b> and <b>PageDown</b> jump several items at a time, <b>Enter</b> and <b>Space</b>
+        select the focused item, <b>Escape</b> and <b>Alt+ArrowUp</b> close the callout and return the focus to the
+        dropdown, and <b>Tab</b> closes it and moves on. Typing printable characters runs a typeahead: the accumulated characters jump to the
+        item starting with them, repeating one character cycles through the items starting with it, and the buffer
+        resets after a short pause. Disabled and hidden items are skipped throughout. In virtualize mode only the
+        rendered items take part in the typeahead, since the ones that have not been rendered yet have no text to
+        match against.
     </div>
-    
-    <br />
     <br />
-
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
-
     <div class="example-content">
-        <BitDropdown Label="Caret down icon (external)"
-                     CaretDownIcon="@BitIconInfo.Css("fa-solid fa-circle-chevron-down")"
+        <BitDropdown Label="Single select"
                      Items="GetBasicCustoms()"
                      NameSelectors="nameSelectors"
                      Placeholder="Select an item" />
-        
         <br /><br />
-        
-        <BitDropdown Label="Clear button icon (external)"
-                     ShowClearButton
-                     ClearButtonIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
+        <BitDropdown Label="Multi select"
+                     MultiSelect
+                     Items="GetBasicCustoms()"
+                     Placeholder="Select items"
+                     NameSelectors="nameSelectors" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Select all" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
+    <div>
+        When the <b>ShowSelectAll</b> parameter is true, a select all item renders above the item list of a multi select
+        dropdown. It selects everything with one click and clears everything with the next, and its check box shows an
+        indeterminate state while only some of the items are selected, so it doubles as a summary of the current
+        selection. It only ever applies to what the user can actually see: disabled items are skipped, and while a
+        search is active it selects the search result rather than the whole list, leaving selections made outside the
+        result untouched. The <b>SelectAllText</b> parameter customizes its text. It is not available when the items
+        come from an <b>ItemsProvider</b>, since the items that are not loaded yet cannot be selected.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown @bind-Values="selectAllValues"
+                     MultiSelect
+                     ShowSelectAll
                      Items="GetBasicCustoms()"
                      NameSelectors="nameSelectors"
-                     Placeholder="Select an item" />
-        
+                     Placeholder="Select items"
+                     Label="Select all" />
+        <br />
+        <div>Values: @string.Join(',', selectAllValues)</div>
         <br /><br />
-        
-        <BitDropdown Label="Chips remove icon (external)"
-                     Chips
+        <BitDropdown MultiSelect
+                     ShowSelectAll
+                     ShowSearchBox
+                     SelectAllText="Select all of them"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select items"
+                     DefaultValue="@string.Empty"
+                     SearchBoxPlaceholder="Search items"
+                     Label="Custom text & search" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Selection limit" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20" PreventRenderForMcpClient>
+    <div>
+        The <b>MaxSelectedItems</b> parameter limits how many items can be selected in the multi select dropdown. Once
+        the limit is reached the unselected items are disabled rather than silently refusing the click, so the boundary
+        is visible before it is hit, and they become available again as soon as an item is unselected. The select all
+        item honors the same limit and stops adding items once it is reached.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown @bind-Values="maxSelectedValues"
                      MultiSelect
-                     ChipsRemoveIcon="@BitIconInfo.Css("bi bi-x-circle")"
+                     MaxSelectedItems="2"
                      Items="GetBasicCustoms()"
                      NameSelectors="nameSelectors"
-                     Placeholder="Select items" />
+                     Placeholder="Select up to 2 items"
+                     Label="Max 2 items" />
+        <br />
+        <div>Values: @string.Join(',', maxSelectedValues)</div>
+    </div>
+</DemoExample>
 
+<DemoExample Title="Empty state" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21" PreventRenderForMcpClient>
+    <div>
+        When there is no item to show, the callout renders a message instead of an empty list. There are two distinct
+        cases and each gets its own text: <b>EmptyText</b> and <b>EmptyTemplate</b> cover a list that has nothing in it
+        ("No items found" by default), while <b>NoResultsText</b> and <b>NoResultsTemplate</b> cover a search that
+        matched nothing ("No results found" by default) &mdash; telling the user that their term found nothing is a
+        different message from telling them the list is empty. When the no-results pair is not set the empty pair is used
+        for both cases.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="Default"
+                     Items="emptyCustoms"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item"
+                     TItem="Product" TValue="string" />
         <br /><br />
-
-        <BitDropdown Label="Search box icons (external)"
+        <BitDropdown Label="EmptyText"
+                     Items="emptyCustoms"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item"
+                     EmptyText="There is nothing here!"
+                     TItem="Product" TValue="string" />
+        <br /><br />
+        <BitDropdown Label="EmptyTemplate"
+                     Items="emptyCustoms"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item"
+                     TItem="Product" TValue="string">
+            <EmptyTemplate>
+                <div class="custom-drp custom-drp-empty">
+                    <BitIcon IconName="@BitIconName.SearchIssue" />
+                    <div>Nothing to show!</div>
+                </div>
+            </EmptyTemplate>
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="Search without result"
                      ShowSearchBox
-                     SearchBoxIcon="@BitIconInfo.Css("fa-solid fa-magnifying-glass")"
-                     SearchBoxClearIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
                      Items="GetBasicCustoms()"
                      NameSelectors="nameSelectors"
-                     Placeholder="Select an item" />
-
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search for anything" />
         <br /><br />
-
-        <BitDropdown Label="Item icons (IconName - Fluent UI)"
-                     Items="GetExternalIconCustoms()"
+        <BitDropdown Label="NoResultsText"
+                     ShowSearchBox
+                     Items="GetBasicCustoms()"
                      NameSelectors="nameSelectors"
-                     Placeholder="Select an item" />
-
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search for anything"
+                     NoResultsText="Nothing matched your search" />
         <br /><br />
+        <BitDropdown Label="NoResultsTemplate"
+                     ShowSearchBox
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search for anything">
+            <NoResultsTemplate>
+                <div class="custom-drp custom-drp-empty">
+                    <BitIcon IconName="@BitIconName.SearchAndApps" />
+                    <div>No match. Try another term!</div>
+                </div>
+            </NoResultsTemplate>
+        </BitDropdown>
+    </div>
+</DemoExample>
 
-        <BitDropdown Label="Item icons (Icon - FontAwesome)"
-                     Items="GetExternalIconFaCustoms()"
+<DemoExample Title="Loading" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22" PreventRenderForMcpClient>
+    <div>
+        The <b>IsLoading</b> parameter reports that the items are still on their way: a spinner replaces the caret
+        down element and the callout shows a loading indicator in place of the item list, while the dropdown itself
+        stays enabled so the user can still open it and see what is happening. The message is customized with the
+        <b>LoadingText</b> parameter and the whole indicator with the <b>LoadingTemplate</b> parameter.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="IsLoading"
+                     IsLoading
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
                      NameSelectors="nameSelectors"
                      Placeholder="Select an item" />
-
         <br /><br />
-
-        <BitDropdown Label="Item icons (Icon - Bootstrap Icons)"
-                     Items="GetExternalIconBiCustoms()"
+        <BitDropdown Label="LoadingText"
+                     IsLoading
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item"
+                     LoadingText="Fetching the products..." />
+        <br /><br />
+        <BitDropdown Label="LoadingTemplate"
+                     IsLoading
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item">
+            <LoadingTemplate>
+                <div class="custom-drp custom-drp-empty">
+                    <BitIcon IconName="@BitIconName.Sync" />
+                    <div>Just a moment...</div>
+                </div>
+            </LoadingTemplate>
+        </BitDropdown>
+        <br /><br /><br /><br />
+        <div><b>A real fetch</b>: the items get loaded when the button is clicked.</div>
+        <br />
+        <BitButton OnClick="LoadDelayedCustoms" IsLoading="isLoadingItems">Load the items</BitButton>
+        <br /><br />
+        <BitDropdown Label="Products"
+                     IsLoading="isLoadingItems"
+                     Items="delayedCustoms"
+                     DefaultValue="@string.Empty"
                      NameSelectors="nameSelectors"
                      Placeholder="Select an item" />
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17" PreventRenderForMcpClient>
-    <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
+<DemoExample Title="Virtualization" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23" PreventRenderForMcpClient>
+    <div>
+        The <b>Virtualize</b> parameter renders only the items that are currently visible instead of the whole list,
+        which keeps the callout fast with thousands of items; <b>ItemSize</b> tells it how tall an item is and
+        <b>OverscanCount</b> how many extra items to keep rendered around the visible window. It works over a local
+        <b>Items</b> collection, or over an <b>ItemsProvider</b> that fetches one page at a time from a server (and
+        receives the current search term, so filtering happens remotely too). Because a value can be selected before
+        the page holding its item has ever been fetched, <b>InitialSelectedItems</b> supplies those items up front so
+        the dropdown can show their text right away. The <b>VirtualizePlaceholder</b> template fills the rows that are
+        still being fetched.
+    </div>
+    <br /><br /><br />
+    <div class="example-content">
+        <div>With <b>Items</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Virtualize
+                     Items="virtualizeCustoms1"
+                     Placeholder="Select an item"
+                     NameSelectors="nameSelectors" />
+        <br />
+        <BitDropdown Label="Multi select"
+                     Virtualize
+                     MultiSelect
+                     ItemSize="35"
+                     OverscanCount="5"
+                     Items="virtualizeCustoms2"
+                     Placeholder="Select items"
+                     NameSelectors="nameSelectors" />
+        <br /><br /><br /><br />
+        <div>With <b>ItemsProvider</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Virtualize
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select an item"
+                     NameSelectors="nameSelectors" />
+        <br />
+        <BitDropdown Label="Multi select"
+                     Virtualize
+                     MultiSelect
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select items"
+                     NameSelectors="nameSelectors" />
+        <br />
+        <BitDropdown Label="VirtualizePlaceholder"
+                     Virtualize
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select an item"
+                     NameSelectors="nameSelectors"
+                     TItem="Product" TValue="string">
+            <VirtualizePlaceholder>
+                <div style="padding:0 0.5rem;color:gray">Loading @(context.Index)...</div>
+            </VirtualizePlaceholder>
+        </BitDropdown>
+        <br /><br /><br /><br />
+        <div>With <b>ItemsProvider and InitialSelectedItems</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Virtualize
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select an item"
+                     InitialSelectedItems="initialSelectedItem"
+                     NameSelectors="nameSelectors" />
+        <br />
+        <BitDropdown Label="Multi select"
+                     Virtualize
+                     MultiSelect
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select items"
+                     InitialSelectedItems="initialSelectedItems"
+                     NameSelectors="nameSelectors" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Color" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24" PreventRenderForMcpClient>
+    <div>
+        The <b>Color</b> parameter paints the accents of the dropdown &mdash; the focus border, the search box
+        underline and icon, the group headers and the check boxes of the multi select items &mdash; in one of the theme
+        colors, <b>Primary</b> being the default. It changes the accents only, not the surface of the control, so the
+        dropdown keeps fitting its surroundings.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Primary"
@@ -657,8 +1161,135 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18">
-    <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
+<DemoExample Title="External Icons" RazorCode="@example25RazorCode" CsharpCode="@example25CsharpCode" Id="example25">
+    <div>
+        Every icon of the dropdown can come from an external library instead of the built-in Fluent UI set. The
+        <b>CaretDownIcon</b>, <b>ClearButtonIcon</b>, <b>ChipsRemoveIcon</b>, <b>SearchBoxIcon</b>,
+        <b>SearchBoxClearIcon</b>, <b>ResponsiveCloseIcon</b> and <b>ItemCheckIcon</b> parameters take a
+        <b>BitIconInfo</b> &mdash; built with <b>BitIconInfo.Fa</b>, <b>BitIconInfo.Bi</b> or the generic
+        <b>BitIconInfo.Css</b> &mdash; and each takes precedence over its <b>...IconName</b> counterpart when both are
+        set. The items themselves follow the same rule through their <b>Icon</b> and <b>IconName</b> members. Remember
+        to reference the stylesheet of the icon library you use.
+    </div>
+    
+    <br />
+    <br />
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
+
+    <div class="example-content">
+        <BitDropdown Label="Caret down icon (external)"
+                     CaretDownIcon="@BitIconInfo.Css("fa-solid fa-circle-chevron-down")"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item" />
+        
+        <br /><br />
+        
+        <BitDropdown Label="Clear button icon (external)"
+                     ShowClearButton
+                     ClearButtonIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item" />
+        
+        <br /><br />
+        
+        <BitDropdown Label="Chips remove icon (external)"
+                     Chips
+                     MultiSelect
+                     ChipsRemoveIcon="@BitIconInfo.Css("bi bi-x-circle")"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     DefaultValues="@(Array.Empty<string>())"
+                     Placeholder="Select items" />
+
+        <br /><br />
+
+        <BitDropdown Label="Search box icons (external)"
+                     ShowSearchBox
+                     SearchBoxIcon="@BitIconInfo.Css("fa-solid fa-magnifying-glass")"
+                     SearchBoxClearIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item" />
+
+        <br /><br />
+
+        <BitDropdown Label="Item check icon (external)"
+                     MultiSelect
+                     ItemCheckIcon="@BitIconInfo.Css("fa-solid fa-heart")"
+                     Items="GetBasicCustoms()"
+                     NameSelectors="nameSelectors"
+                     DefaultValues="@(Array.Empty<string>())"
+                     Placeholder="Select items" />
+
+        <br /><br />
+
+        <BitDropdown Label="Item icons (IconName - Fluent UI)"
+                     Items="GetExternalIconCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item" />
+
+        <br /><br />
+
+        <BitDropdown Label="Item icons (Icon - FontAwesome)"
+                     Items="GetExternalIconFaCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item" />
+
+        <br /><br />
+
+        <BitDropdown Label="Item icons (Icon - Bootstrap Icons)"
+                     Items="GetExternalIconBiCustoms()"
+                     NameSelectors="nameSelectors"
+                     Placeholder="Select an item" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Size" RazorCode="@example26RazorCode" CsharpCode="@example26CsharpCode" Id="example26" PreventRenderForMcpClient>
+    <div>
+        The <b>Size</b> parameter scales the whole component in one step, <b>Medium</b> being the default: the height
+        and the font size of the dropdown, of its search box and of the items in the callout all follow the chosen size.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="Small"
+                     ShowSearchBox
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Size="BitSize.Small"
+                     Placeholder="Select an item" />
+        <br /><br />
+        <BitDropdown Label="Medium"
+                     ShowSearchBox
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Size="BitSize.Medium"
+                     Placeholder="Select an item" />
+        <br /><br />
+        <BitDropdown Label="Large"
+                     ShowSearchBox
+                     Items="GetBasicCustoms()"
+                     DefaultValue="@string.Empty"
+                     NameSelectors="nameSelectors"
+                     Size="BitSize.Large"
+                     Placeholder="Select an item" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Style & Class" RazorCode="@example27RazorCode" CsharpCode="@example27CsharpCode" Id="example27">
+    <div>
+        The dropdown can be styled at every level: <b>Style</b> and <b>Class</b> apply to the root element, each item
+        carries its own style and class, and the <b>Styles</b> and <b>Classes</b> parameters reach every internal part
+        of the component individually &mdash; the label, the container, the callout, the search box, the scroll
+        container, the items and everything else listed in the class-styles reference below. Because the callout is
+        rendered outside the root element, styling it through <b>Styles.Callout</b> or <b>Classes.Callout</b> is the way
+        to reach it rather than a descendant selector on the root.
+    </div>
     <br /><br />
     <div class="example-content">
         <div>Component's Style & Class:</div><br />
@@ -699,8 +1330,13 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
-    <div>Use BitDropdown in right-to-left (RTL).</div>
+<DemoExample Title="RTL" RazorCode="@example28RazorCode" CsharpCode="@example28CsharpCode" Id="example28" PreventRenderForMcpClient>
+    <div>
+        Setting the <b>Dir</b> parameter to <b>Rtl</b> renders the dropdown right-to-left for languages like Arabic,
+        Persian and Hebrew: the text, the label, the chevron, the check boxes and the search box all mirror, the
+        callout aligns to the right edge of the dropdown, and the responsive panel slides in from the left and is
+        swiped away in the opposite direction.
+    </div>
     <br />
     <dir dir="rtl" style="padding:0">
         <div class="example-content">
@@ -726,52 +1362,3 @@
         </div>
     </dir>
 </DemoExample>
-
-<DemoExample Title="Virtualization" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20">
-    <div>Demonstrates virtualization in the BitDropdown component for handling large datasets efficiently.</div>
-    <br /><br /><br />
-    <div class="example-content">
-        <div>With <b>Items</b>:</div><br />
-        <BitDropdown Label="Single select"
-                     Virtualize
-                     Items="virtualizeCustoms1"
-                     Placeholder="Select an item"
-                     NameSelectors="nameSelectors" />
-        <br />
-        <BitDropdown Label="Multi select"
-                     Virtualize
-                     MultiSelect
-                     Items="virtualizeCustoms2"
-                     Placeholder="Select items"
-                     NameSelectors="nameSelectors" />
-        <br /><br /><br /><br />
-        <div>With <b>ItemsProvider</b>:</div><br />
-        <BitDropdown Label="Single select"
-                     Virtualize
-                     ItemsProvider="LoadItems"
-                     Placeholder="Select an item"
-                     NameSelectors="nameSelectors" />
-        <br />
-        <BitDropdown Label="Multi select"
-                     Virtualize
-                     MultiSelect
-                     ItemsProvider="LoadItems"
-                     Placeholder="Select items"
-                     NameSelectors="nameSelectors" /><br /><br /><br /><br />
-        <div>With <b>ItemsProvider and InitialSelectedItems</b>:</div><br />
-        <BitDropdown Label="Single select"
-                     Virtualize
-                     ItemsProvider="LoadItems"
-                     Placeholder="Select an item"
-                     InitialSelectedItems="initialSelectedItem"
-                     NameSelectors="nameSelectors" />
-        <br />
-        <BitDropdown Label="Multi select"
-                     Virtualize
-                     MultiSelect
-                     ItemsProvider="LoadItems"
-                     Placeholder="Select items"
-                     InitialSelectedItems="initialSelectedItems"
-                     NameSelectors="nameSelectors" />
-    </div>
-</DemoExample>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs
index 7c77ac9561..683e02b731 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.cs
@@ -158,6 +158,14 @@ private List<Product> GetRtlCustoms() =>
 
 
 
+    private readonly List<Product> emptyCustoms = [];
+
+    private IEnumerable<string> selectAllValues = [];
+    private IEnumerable<string> maxSelectedValues = [];
+
+    private bool isDropdownOpen;
+    private int selectItemCounter;
+
     private string controlledValue = "f-app";
     private IEnumerable<string> controlledValues = ["f-app", "f-ban"];
 
@@ -169,6 +177,12 @@ private List<Product> GetRtlCustoms() =>
 
     private string clearValue = "f-app";
     private IEnumerable<string> clearValues = ["f-app", "f-ban"];
+    private int clearCounter;
+
+    private string calloutState = "closed";
+
+    private bool isLoadingItems;
+    private ICollection<Product> delayedCustoms = [];
 
     private string? immediateSearchValue;
     private string? debouncedSearchValue;
@@ -263,6 +277,21 @@ private void HandleOnDynamicAdd(Product item)
         comboBoxCustoms.Add(item);
     }
 
+    private void HandleOnCalloutOpen() => calloutState = "opened";
+
+    private void HandleOnCalloutClose() => calloutState = "closed";
+
+    private async Task LoadDelayedCustoms()
+    {
+        isLoadingItems = true;
+        delayedCustoms = [];
+
+        await Task.Delay(2000);
+
+        delayedCustoms = GetBasicCustoms();
+        isLoadingItems = false;
+    }
+
     private async ValueTask<BitDropdownItemsProviderResult<Product>> LoadItems(
         BitDropdownItemsProviderRequest<Product> request)
     {
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
index 4aa2f2dc4b..6231194ce4 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownCustomDemo.razor.samples.cs
@@ -30,7 +30,29 @@ public partial class _BitDropdownCustomDemo
              Items=""GetBasicCustoms()""
              DefaultValue=""@(""f-ora"")""
              Placeholder=""Select an item""
-             NameSelectors=""nameSelectors"" />";
+             NameSelectors=""nameSelectors"" />
+
+<BitDropdown Label=""ReadOnly""
+             ReadOnly
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@(""f-app"")""
+             Placeholder=""Select an item""
+             NameSelectors=""nameSelectors"" />
+
+<BitDropdown Label=""Custom delimiter""
+             MultiSelect
+             MultiSelectDelimiter="" - ""
+             Items=""GetBasicCustoms()""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"" })""
+             Placeholder=""Select items""
+             NameSelectors=""nameSelectors"" />
+
+<BitDropdown Label=""Title""
+             Title=""Pick your favorite fruit or vegetable""
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Hover me"" />";
     private readonly string example1CsharpCode = @"
 public class Product
 {
@@ -92,6 +114,18 @@ public class Product
              NameSelectors=""nameSelectors""
              Placeholder=""Select an item"" />
 
+<BitDropdown Label=""Templates""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"">
+    <PrefixTemplate>
+        <BitIcon IconName=""@BitIconName.ShoppingCart"" Style=""padding-inline:0.5rem"" />
+    </PrefixTemplate>
+    <SuffixTemplate>
+        <BitIcon IconName=""@BitIconName.Info"" Style=""padding-inline:0.5rem"" />
+    </SuffixTemplate>
+</BitDropdown>
+
 <BitDropdown Label=""Disabled""
              Prefix=""Fruits:""
              Suffix=""kg""
@@ -204,7 +238,14 @@ public class Product
              MultiSelect
              Items=""GetBasicCustoms()""
              Placeholder=""Select items""
-             NameSelectors=""nameSelectors"" />";
+             NameSelectors=""nameSelectors"" />
+
+<div style=""padding:0.5rem;border-radius:0.5rem;background:linear-gradient(90deg,#ff00cc7f,#3333997f)"">
+    <BitDropdown Transparent
+                 Items=""GetBasicCustoms()""
+                 Placeholder=""Select an item""
+                 NameSelectors=""nameSelectors"" />
+</div>";
     private readonly string example4CsharpCode = @"
 public class Product
 {
@@ -344,8 +385,18 @@ protected override void OnInitialized()
              Placeholder=""Select options""
              Label=""Multi select dropdown""
              NameSelectors=""nameSelectors"" />
-<div>Values: @string.Join(',', clearValues)</div>";
+<div>Values: @string.Join(',', clearValues)</div>
+
+<BitDropdown ShowClearButton
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@(""f-app"")""
+             NameSelectors=""nameSelectors""
+             Label=""Single select dropdown""
+             Placeholder=""Select an option""
+             OnClear=""() => clearCounter++"" />
+<div>OnClear count: @clearCounter</div>";
     private readonly string example7CsharpCode = @"
+private int clearCounter;
 private string? clearValue = ""f-app"";
 private ICollection<string?> clearValues = new[] { ""f-app"", ""f-ban"" };
 
@@ -470,6 +521,113 @@ public class Product
 };";
 
     private readonly string example9RazorCode = @"
+<BitDropdown Label=""SearchMode: StartsWith""
+             ShowSearchBox
+             AutoFocusSearchBox
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Type a first letter""
+             SearchMode=""BitDropdownSearchMode.StartsWith"" />
+
+<BitDropdown Label=""MinSearchLength: 3""
+             ShowSearchBox
+             AutoFocusSearchBox
+             MinSearchLength=""3""
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Type at least 3 characters"" />
+
+<BitDropdown Label=""HighlightSearch""
+             ShowSearchBox
+             AutoFocusSearchBox
+             HighlightSearch
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search item"" />
+
+<BitDropdown Label=""Highlight in the ComboBox""
+             Combo
+             HighlightSearch
+             Items=""comboBoxCustoms""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""comboBoxNameSelectors""
+             Placeholder=""Type to filter"" />";
+    private readonly string example9CsharpCode = @"
+public class Product
+{
+    public string? Label { get; set; }
+    public string? CssClass { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? CssStyle { get; set; }
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
+private List<Product> GetBasicCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private BitDropdownNameSelectors<Product, string?> nameSelectors = new()
+{
+    Text = { Selector = c => c.Text },
+    Value = { Selector = c => c.Value },
+    ItemType = { Selector = c => c.Type },
+    IsEnabled = { Selector = c => c.Disabled is false },
+};
+
+private List<Product> comboBoxCustoms = new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private BitDropdownNameSelectors<Product, string> comboBoxNameSelectors = new()
+{
+    AriaLabel = { Selector = c => c.Label },
+    Class = { Selector = c => c.CssClass },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Style = { Selector = c => c.CssStyle },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+    ValueSetter = (Product item, string value) => item.Value = value,
+    TextSetter = (string text, Product item) => item.Text = text
+};";
+
+    private readonly string example10RazorCode = @"
 <BitDropdown Label=""Immediate""
              ShowSearchBox
              Immediate
@@ -498,7 +656,22 @@ public class Product
              Items=""comboBoxCustoms""
              Placeholder=""Select an item""
              NameSelectors=""comboBoxNameSelectors"" />";
-    private readonly string example9CsharpCode = @"
+    private readonly string example10CsharpCode = @"
+public class Product
+{
+    public string? Label { get; set; }
+    public string? CssClass { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? CssStyle { get; set; }
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
 private string? immediateSearchValue;
 private string? debouncedSearchValue;
 
@@ -541,9 +714,26 @@ public class Product
     Text = { Selector = c => c.Text },
     Title = { Selector = c => c.Title },
     Value = { Selector = c => c.Value },
+};
+
+private BitDropdownNameSelectors<Product, string> comboBoxNameSelectors = new()
+{
+    AriaLabel = { Selector = c => c.Label },
+    Class = { Selector = c => c.CssClass },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Style = { Selector = c => c.CssStyle },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+    ValueSetter = (Product item, string value) => item.Value = value,
+    TextSetter = (string text, Product item) => item.Text = text
 };";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example11RazorCode = @"
 @using System.ComponentModel.DataAnnotations;
 
 <style>
@@ -573,7 +763,7 @@ public class Product
 
     <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
 </EditForm>";
-    private readonly string example10CsharpCode = @"
+    private readonly string example11CsharpCode = @"
 public class FormValidationDropdownModel
 {
     [MaxLength(2, ErrorMessage = ""The property {0} have more than {1} elements"")]
@@ -630,7 +820,7 @@ public class Product
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example11RazorCode = @"
+    private readonly string example12RazorCode = @"
 <style>
     .custom-drp {
         gap: 10px;
@@ -725,6 +915,15 @@ public class Product
              Placeholder=""Select an item""
              CaretDownIconName=""@BitIconName.ScrollUpDown"" />
 
+<BitDropdown Label=""CaretDownTemplate""
+             Items=""GetDataCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"">
+    <CaretDownTemplate>
+        <BitIcon IconName=""@BitIconName.FavoriteStar"" Style=""font-size:0.875rem"" />
+    </CaretDownTemplate>
+</BitDropdown>
+
 <BitDropdown Label=""Callout templates""
              Items=""GetDataCustoms()""
              NameSelectors=""nameSelectors""
@@ -736,7 +935,7 @@ public class Product
         <BitActionButton IconName=""@BitIconName.Add"">New Item</BitActionButton>
     </CalloutFooterTemplate>
 </BitDropdown>";
-    private readonly string example11CsharpCode = @"
+    private readonly string example12CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
@@ -781,7 +980,7 @@ public class DropdownItemData
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example13RazorCode = @"
 <BitDropdown @bind-Value=""controlledValue""
              Label=""Single select""
              Items=""GetBasicCustoms()""
@@ -833,8 +1032,42 @@ public class DropdownItemData
              DefaultValue=""@string.Empty""
              NameSelectors=""nameSelectors""
              OnSelectItem=""(Product item) => selectedItem2 = item"" />
-<div>Selected Value: @selectedItem2?.Value</div>";
-    private readonly string example12CsharpCode = @"
+<div>Selected Value: @selectedItem2?.Value</div>
+
+<BitDropdown Label=""Single select""
+             Reselectable
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             NameSelectors=""nameSelectors""
+             OnSelectItem=""(Product item) => selectItemCounter++"" />
+<div>OnSelectItem count: @selectItemCounter</div>
+
+<BitButton OnClick=""() => isDropdownOpen = true"">Open the dropdown</BitButton>
+<BitDropdown @bind-IsOpen=""isDropdownOpen""
+             Label=""Single select""
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             NameSelectors=""nameSelectors"" />
+
+<BitDropdown Label=""Single select""
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             NameSelectors=""nameSelectors""
+             OnOpen=""HandleOnCalloutOpen""
+             OnClose=""HandleOnCalloutClose"" />
+<div>The callout is @calloutState.</div>";
+    private readonly string example13CsharpCode = @"
+private bool isDropdownOpen;
+private int selectItemCounter;
+private string calloutState = ""closed"";
+
+private void HandleOnCalloutOpen() => calloutState = ""opened"";
+
+private void HandleOnCalloutClose() => calloutState = ""closed"";
+
 private string controlledValue = ""f-app"";
 private IEnumerable<string> controlledValues = [""f-app"", ""f-ban""];
 
@@ -884,202 +1117,108 @@ public class Product
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example20RazorCode = @"
-<BitDropdown Label=""Single select""
-             Virtualize
-             Items=""virtualizeCustoms1""
-             Placeholder=""Select an item""
-             NameSelectors=""nameSelectors"" />
-
-<BitDropdown Label=""Multi select""
-             Virtualize
-             MultiSelect
-             Items=""virtualizeCustoms2""
-             Placeholder=""Select items""
-             NameSelectors=""nameSelectors"" />
-
-
-<BitDropdown Label=""Single select""
-             Virtualize
-             ItemsProvider=""LoadItems""
-             Placeholder=""Select an item""
-             NameSelectors=""nameSelectors"" />
+    private readonly string example14RazorCode = @"
+<BitDropdown @bind-Value=""comboBoxValueSample1""
+             Combo
+             Responsive
+             Items=""comboBoxCustoms""
+             Placeholder=""Select an option""
+             Label=""Single select combo box""
+             NameSelectors=""comboBoxNameSelectors"" />
+<div>Value: @comboBoxValueSample1</div>
 
-<BitDropdown Label=""Multi select""
-             Virtualize
+<BitDropdown @bind-Values=""comboBoxValues1""
+             Combo
+             Responsive
              MultiSelect
-             ItemsProvider=""LoadItems""
-             Placeholder=""Select items""
-             NameSelectors=""nameSelectors"" />
-
-<BitDropdown Label=""Single select""
-             Virtualize
-             ItemsProvider=""LoadItems""
-             Placeholder=""Select an item""
-             InitialSelectedItems=""initialSelectedItem""
-             NameSelectors=""nameSelectors"" />
+             Items=""comboBoxCustoms""
+             Label=""Multi select combo box""
+             Placeholder=""Select an option""
+             NameSelectors=""comboBoxNameSelectors"" />
+<div>Values: @string.Join(',', comboBoxValues1)</div>";
+    private readonly string example14CsharpCode = @"
+private string comboBoxValueSample1 = default!;
+private ICollection<string> comboBoxValues1 = [];
 
-<BitDropdown Label=""Multi select""
-             Virtualize
-             MultiSelect
-             ItemsProvider=""LoadItems""
-             Placeholder=""Select items""
-             InitialSelectedItems=""initialSelectedItems""
-             NameSelectors=""nameSelectors"" />";
-    private readonly string example20CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
+    public string? CssClass { get; set; }
     public string? Key { get; set; }
     public object? Payload { get; set; }
     public bool Disabled { get; set; }
     public bool Visible { get; set; } = true;
     public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? CssStyle { get; set; }
     public string? Text { get; set; }
     public string? Title { get; set; }
     public string? Value { get; set; }
 }
 
-private ICollection<Product>? virtualizeCustoms1;
-private ICollection<Product>? virtualizeCustoms2;
-
-private IEnumerable<Product> initialSelectedItem = [
-    new()
-    {
-        Text = ""Product 100"",
-        Value = ""100"",
-        Payload = new ProductDto {
-            Id = 100,
-            Price = 60,
-            Name = ""Product 100""
-        },
-        Label = ""Product 100"",
-        Type = BitDropdownItemType.Normal
-    }
-];
-
-private IEnumerable<Product> initialSelectedItems = [
-    new()
-    {
-        Text = ""Product 100"",
-        Value = ""100"",
-        Payload = new ProductDto {
-            Id = 100,
-            Price = 60,
-            Name = ""Product 100""
-        },
-        Label = ""Product 100"",
-        Type = BitDropdownItemType.Normal
-    },
-    new()
-    {
-        Text = ""Product 99"",
-        Value = ""99"",
-        Payload = new ProductDto {
-            Id = 99,
-            Price = 75,
-            Name = ""Product 99""
-        },
-        Label = ""Product 99"",
-        Type = BitDropdownItemType.Normal
-    }
-];
-
-protected override void OnInitialized()
+private List<Product> comboBoxCustoms = new()
 {
-    virtualizeCustoms1 = Enumerable.Range(1, 10_000)
-                                   .Select(p => new Product { Text = $""Produce {p}"", Value = p.ToString() })
-                                   .ToArray();
-
-    virtualizeCustoms2 = Enumerable.Range(1, 10_000)
-                                   .Select(p => new Product { Text = $""Produce {p}"", Value = p.ToString() })
-                                   .ToArray();
-}
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
 
-private BitDropdownNameSelectors<Product, string?> nameSelectors = new() 
+private BitDropdownNameSelectors<Product, string> comboBoxNameSelectors = new()
 {
     AriaLabel = { Selector = c => c.Label },
+    Class = { Selector = c => c.CssClass },
     Id = { Selector = c => c.Key },
     Data = { Selector = c => c.Payload },
     IsEnabled = { Selector = c => c.Disabled is false },
     IsHidden = { Selector = c => c.Visible is false },
     ItemType = { Selector = c => c.Type },
+    Style = { Selector = c => c.CssStyle },
     Text = { Selector = c => c.Text },
     Title = { Selector = c => c.Title },
     Value = { Selector = c => c.Value },
-};
-
-private async ValueTask<BitDropdownItemsProviderResult<Product>> LoadItems(
-    BitDropdownItemsProviderRequest<Product> request)
-{
-    try
-    {
-        // https://docs.microsoft.com/en-us/odata/concepts/queryoptions-overview
-
-        var query = new Dictionary<string, object?>()
-        {
-            { ""$top"", request.Count == 0 ? 50 : request.Count },
-            { ""$skip"", request.StartIndex }
-        };
-
-        if (string.IsNullOrEmpty(request.Search) is false)
-        {
-            query.Add(""$filter"", $""contains(Name,'{request.Search}')"");
-        }
-
-        var url = NavManager.GetUriWithQueryParameters(""api/Products/GetProducts"", query);
-
-        var data = await HttpClient.GetFromJsonAsync(url, AppJsonContext.Default.PagedResultProductDto);
-
-        var items = data!.Items.Select(i => new Product
-        {
-            Text = i.Name,
-            Value = i.Id.ToString(),
-            Payload = i,
-            Label = i.Name,
-            Disabled = false,
-            Type = BitDropdownItemType.Normal
-        }).ToList();
-
-        return BitDropdownItemsProviderResult.From(items, data!.TotalCount);
-    }
-    catch
-    {
-        return BitDropdownItemsProviderResult.From(new List<Product>(), 0);
-    }
-}";
+    ValueSetter = (Product item, string value) => item.Value = value,
+    TextSetter = (string text, Product item) => item.Text = text
+};";
 
-    private readonly string example13RazorCode = @"
-<BitDropdown @bind-Value=""comboBoxValueSample1""
-             Combo
+    private readonly string example15RazorCode = @"
+<BitDropdown @bind-Value=""comboBoxValueSample2""
              Responsive
+             Combo Chips
              Items=""comboBoxCustoms""
              Placeholder=""Select an option""
-             Label=""Single select combo box""
-             NameSelectors=""comboBoxNameSelectors"" />
-<div>Value: @comboBoxValueSample1</div>
+             NameSelectors=""comboBoxNameSelectors""
+             Label=""Single select combo box & chips"" />
+<div>Value: @comboBoxValueSample2</div>
 
-<BitDropdown @bind-Values=""comboBoxValues1""
-             Combo
+<BitDropdown @bind-Values=""comboBoxValues2""
              Responsive
+             Combo Chips 
              MultiSelect
              Items=""comboBoxCustoms""
-             Label=""Multi select combo box""
              Placeholder=""Select an option""
-             NameSelectors=""comboBoxNameSelectors"" />
-<div>Values: @string.Join(',', comboBoxValues1)</div>";
-    private readonly string example13CsharpCode = @"
-private string comboBoxValueSample1 = default!;
-private ICollection<string> comboBoxValues1 = [];
+             NameSelectors=""comboBoxNameSelectors""
+             Label=""Multi select combo box & chips"" />
+<div>Values: @string.Join(',', comboBoxValues2)</div>";
+    private readonly string example15CsharpCode = @"
+private string comboBoxValueSample2 = default!;
+private ICollection<string> comboBoxValues2 = [];
 
 public class Product
 {
     public string? Label { get; set; }
+    public string? CssClass { get; set; }
     public string? Key { get; set; }
     public object? Payload { get; set; }
     public bool Disabled { get; set; }
     public bool Visible { get; set; } = true;
     public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? CssStyle { get; set; }
     public string? Text { get; set; }
     public string? Title { get; set; }
     public string? Value { get; set; }
@@ -1113,119 +1252,842 @@ public class Product
     Title = { Selector = c => c.Title },
     Value = { Selector = c => c.Value },
     ValueSetter = (Product item, string value) => item.Value = value,
-    TextSetter = (string? text, Product item) => item.Text = text
+    TextSetter = (string text, Product item) => item.Text = text
 };";
 
-    private readonly string example14RazorCode = @"
-<BitDropdown @bind-Value=""comboBoxValueSample2""
-             Responsive
+    private readonly string example16RazorCode = @"
+<BitDropdown Label=""MaxDisplayedItems (chips)""
+             Chips
+             MultiSelect
+             MaxDisplayedItems=""2""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"", ""f-gra"", ""v-car"" })"" />
+
+<BitDropdown Label=""OverflowTextFormat""
+             Chips
+             MultiSelect
+             MaxDisplayedItems=""2""
+             OverflowTextFormat=""and {0} more""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"", ""f-gra"", ""v-car"" })"" />
+
+<BitDropdown Label=""SelectedItemsTextFormat""
+             MultiSelect
+             MaxDisplayedItems=""2""
+             SelectedItemsTextFormat=""{0} fruits and vegetables""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"", ""f-gra"", ""v-car"" })"" />
+
+<BitDropdown Label=""AutoClearSearch""
              Combo Chips
+             MultiSelect
+             AutoClearSearch
              Items=""comboBoxCustoms""
-             Placeholder=""Select an option""
              NameSelectors=""comboBoxNameSelectors""
-             Label=""Single select combo box & chips"" />
-<div>Value: @comboBoxValueSample2</div>
+             DefaultValues=""@(Array.Empty<string>())""
+             Placeholder=""Type to filter, then pick"" />
 
-<BitDropdown @bind-Values=""comboBoxValues2""
-             Responsive
-             Combo Chips 
+<BitDropdown Label=""HideSelectedItems""
+             Chips
              MultiSelect
+             HideSelectedItems
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"" })"" />";
+    private readonly string example16CsharpCode = @"
+public class Product
+{
+    public string? Label { get; set; }
+    public string? CssClass { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? CssStyle { get; set; }
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
+private List<Product> GetBasicCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private BitDropdownNameSelectors<Product, string?> nameSelectors = new()
+{
+    AriaLabel = { Selector = c => c.Label },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+};
+
+private List<Product> comboBoxCustoms = new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private BitDropdownNameSelectors<Product, string> comboBoxNameSelectors = new()
+{
+    AriaLabel = { Selector = c => c.Label },
+    Class = { Selector = c => c.CssClass },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Style = { Selector = c => c.CssStyle },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+    ValueSetter = (Product item, string value) => item.Value = value,
+    TextSetter = (string text, Product item) => item.Text = text
+};";
+
+    private readonly string example17RazorCode = @"
+<BitDropdown @bind-Value=""comboBoxValueSample3""
+             Combo Dynamic Responsive
              Items=""comboBoxCustoms""
              Placeholder=""Select an option""
              NameSelectors=""comboBoxNameSelectors""
-             Label=""Multi select combo box & chips"" />
-<div>Values: @string.Join(',', comboBoxValues2)</div>";
-    private readonly string example14CsharpCode = @"
-private string comboBoxValueSample2 = default!;
-private ICollection<string> comboBoxValues2 = [];
+             Label=""Single select combo box & dynamic""
+             OnDynamicAdd=""(Product item) => HandleOnDynamicAdd(item)""
+             DynamicValueGenerator=""@((Product item) => item.Text ?? """")"" />
+<div>Value: @comboBoxValueSample3</div>
+
+<BitDropdown @bind-Value=""comboBoxValueSample4""
+             Responsive
+             Combo Chips Dynamic
+             Items=""comboBoxCustoms""
+             Placeholder=""Select an option""
+             NameSelectors=""comboBoxNameSelectors""
+             Label=""Single select combo box, chips & dynamic""
+             OnDynamicAdd=""(Product item) => HandleOnDynamicAdd(item)""
+             DynamicValueGenerator=""@((Product item) => item.Text ?? """")"" />
+<div>Value: @comboBoxValueSample4</div>
+
+<BitDropdown @bind-Values=""comboBoxValues3""
+             Responsive
+             MultiSelect
+             Combo Chips Dynamic
+             Items=""comboBoxCustoms""
+             Placeholder=""Select options""
+             NameSelectors=""comboBoxNameSelectors""
+             Label=""Multi select combo box, chips & dynamic""
+             OnDynamicAdd=""(Product item) => HandleOnDynamicAdd(item)""
+             DynamicValueGenerator=""@((Product item) => item.Text ?? """")"" />
+<div>Values: @string.Join(',', comboBoxValues3)</div>";
+    private readonly string example17CsharpCode = @"
+private string comboBoxValueSample3 = default!;
+private string comboBoxValueSample4 = default!;
+private ICollection<string> comboBoxValues3 = [];
+
+private void HandleOnDynamicAdd(Product item)
+{
+    comboBoxCustoms.Add(item);
+}
+
+public class Product
+{
+    public string? Label { get; set; }
+    public string? CssClass { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? CssStyle { get; set; }
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
+private List<Product> comboBoxCustoms = new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private BitDropdownNameSelectors<Product, string> comboBoxNameSelectors = new()
+{
+    AriaLabel = { Selector = c => c.Label },
+    Class = { Selector = c => c.CssClass },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Style = { Selector = c => c.CssStyle },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+    ValueSetter = (Product item, string value) => item.Value = value,
+    TextSetter = (string text, Product item) => item.Text = text
+};";
+
+    private readonly string example18RazorCode = @"
+<BitDropdown Label=""Single select""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Multi select""
+             MultiSelect
+             Items=""GetBasicCustoms()""
+             Placeholder=""Select items""
+             NameSelectors=""nameSelectors"" />";
+    private readonly string example18CsharpCode = @"
+public class Product
+{
+    public string? Label { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
+private List<Product> GetBasicCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private BitDropdownNameSelectors<Product, string?> nameSelectors = new()
+{
+    AriaLabel = { Selector = c => c.Label },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+};";
+
+    private readonly string example19RazorCode = @"
+<BitDropdown @bind-Values=""selectAllValues""
+             MultiSelect
+             ShowSelectAll
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items""
+             Label=""Select all"" />
+<div>Values: @string.Join(',', selectAllValues)</div>
+
+<BitDropdown MultiSelect
+             ShowSelectAll
+             ShowSearchBox
+             SelectAllText=""Select all of them""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items""
+             DefaultValue=""@string.Empty""
+             SearchBoxPlaceholder=""Search items""
+             Label=""Custom text & search"" />";
+    private readonly string example19CsharpCode = @"
+private IEnumerable<string> selectAllValues = [];
+
+public class Product
+{
+    public string? Label { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
+private List<Product> GetBasicCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private BitDropdownNameSelectors<Product, string?> nameSelectors = new()
+{
+    AriaLabel = { Selector = c => c.Label },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+};";
+
+    private readonly string example20RazorCode = @"
+<BitDropdown @bind-Values=""maxSelectedValues""
+             MultiSelect
+             MaxSelectedItems=""2""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select up to 2 items""
+             Label=""Max 2 items"" />
+<div>Values: @string.Join(',', maxSelectedValues)</div>";
+    private readonly string example20CsharpCode = @"
+private IEnumerable<string> maxSelectedValues = [];
+
+public class Product
+{
+    public string? Label { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
+private List<Product> GetBasicCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private BitDropdownNameSelectors<Product, string?> nameSelectors = new()
+{
+    AriaLabel = { Selector = c => c.Label },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+};";
+
+    private readonly string example21RazorCode = @"
+<style>
+    .custom-drp {
+        gap: 10px;
+        display: flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+    }
+
+    .custom-drp.custom-drp-empty {
+        color: orangered;
+        padding: 5px 12px;
+        justify-content: center;
+    }
+</style>
+
+<BitDropdown Label=""Default""
+             Items=""emptyCustoms""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             TItem=""Product"" TValue=""string"" />
+
+<BitDropdown Label=""EmptyText""
+             Items=""emptyCustoms""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             EmptyText=""There is nothing here!""
+             TItem=""Product"" TValue=""string"" />
+
+<BitDropdown Label=""EmptyTemplate""
+             Items=""emptyCustoms""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             TItem=""Product"" TValue=""string"">
+    <EmptyTemplate>
+        <div class=""custom-drp custom-drp-empty"">
+            <BitIcon IconName=""@BitIconName.SearchIssue"" />
+            <div>Nothing to show!</div>
+        </div>
+    </EmptyTemplate>
+</BitDropdown>
+
+<BitDropdown Label=""Search without result""
+             ShowSearchBox
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search for anything"" />
+
+<BitDropdown Label=""NoResultsText""
+             ShowSearchBox
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search for anything""
+             NoResultsText=""Nothing matched your search"" />
+
+<BitDropdown Label=""NoResultsTemplate""
+             ShowSearchBox
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search for anything"">
+    <NoResultsTemplate>
+        <div class=""custom-drp custom-drp-empty"">
+            <BitIcon IconName=""@BitIconName.SearchAndApps"" />
+            <div>No match. Try another term!</div>
+        </div>
+    </NoResultsTemplate>
+</BitDropdown>";
+    private readonly string example21CsharpCode = @"
+private readonly List<Product> emptyCustoms = [];
+
+public class Product
+{
+    public string? Label { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
+private List<Product> GetBasicCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private BitDropdownNameSelectors<Product, string?> nameSelectors = new()
+{
+    AriaLabel = { Selector = c => c.Label },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+};";
+
+    private readonly string example22RazorCode = @"
+<style>
+    .custom-drp {
+        gap: 10px;
+        display: flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+    }
+
+    .custom-drp.custom-drp-empty {
+        color: orangered;
+        padding: 5px 12px;
+        justify-content: center;
+    }
+</style>
+
+<BitDropdown Label=""IsLoading""
+             IsLoading
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""LoadingText""
+             IsLoading
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item""
+             LoadingText=""Fetching the products..."" />
+
+<BitDropdown Label=""LoadingTemplate""
+             IsLoading
+             Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"">
+    <LoadingTemplate>
+        <div class=""custom-drp custom-drp-empty"">
+            <BitIcon IconName=""@BitIconName.Sync"" />
+            <div>Just a moment...</div>
+        </div>
+    </LoadingTemplate>
+</BitDropdown>
+
+<BitButton OnClick=""LoadDelayedCustoms"" IsLoading=""isLoadingItems"">Load the items</BitButton>
+<BitDropdown Label=""Products""
+             IsLoading=""isLoadingItems""
+             Items=""delayedCustoms""
+             DefaultValue=""@string.Empty""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select an item"" />";
+    private readonly string example22CsharpCode = @"
+public class Product
+{
+    public string? Label { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
+private bool isLoadingItems;
+private ICollection<Product> delayedCustoms = [];
+
+private async Task LoadDelayedCustoms()
+{
+    isLoadingItems = true;
+    delayedCustoms = [];
+
+    await Task.Delay(2000);
+
+    delayedCustoms = GetBasicCustoms();
+    isLoadingItems = false;
+}
+
+private List<Product> GetBasicCustoms() => new()
+{
+    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { Type = BitDropdownItemType.Divider },
+    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private BitDropdownNameSelectors<Product, string?> nameSelectors = new()
+{
+    AriaLabel = { Selector = c => c.Label },
+    Id = { Selector = c => c.Key },
+    Data = { Selector = c => c.Payload },
+    IsEnabled = { Selector = c => c.Disabled is false },
+    IsHidden = { Selector = c => c.Visible is false },
+    ItemType = { Selector = c => c.Type },
+    Text = { Selector = c => c.Text },
+    Title = { Selector = c => c.Title },
+    Value = { Selector = c => c.Value },
+};";
+
+    private readonly string example23RazorCode = @"
+<BitDropdown Label=""Single select""
+             Virtualize
+             Items=""virtualizeCustoms1""
+             Placeholder=""Select an item""
+             NameSelectors=""nameSelectors"" />
+
+<BitDropdown Label=""Multi select""
+             Virtualize
+             MultiSelect
+             ItemSize=""35""
+             OverscanCount=""5""
+             Items=""virtualizeCustoms2""
+             Placeholder=""Select items""
+             NameSelectors=""nameSelectors"" />
+
+
+<BitDropdown Label=""Single select""
+             Virtualize
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select an item""
+             NameSelectors=""nameSelectors"" />
+
+<BitDropdown Label=""Multi select""
+             Virtualize
+             MultiSelect
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select items""
+             NameSelectors=""nameSelectors"" />
+
+<BitDropdown Label=""VirtualizePlaceholder""
+             Virtualize
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select an item""
+             NameSelectors=""nameSelectors""
+             TItem=""Product"" TValue=""string"">
+    <VirtualizePlaceholder>
+        <div style=""padding:0 0.5rem;color:gray"">Loading @(context.Index)...</div>
+    </VirtualizePlaceholder>
+</BitDropdown>
+
+<BitDropdown Label=""Single select""
+             Virtualize
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select an item""
+             InitialSelectedItems=""initialSelectedItem""
+             NameSelectors=""nameSelectors"" />
+
+<BitDropdown Label=""Multi select""
+             Virtualize
+             MultiSelect
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select items""
+             InitialSelectedItems=""initialSelectedItems""
+             NameSelectors=""nameSelectors"" />";
+    private readonly string example23CsharpCode = @"
+public class Product
+{
+    public string? Label { get; set; }
+    public string? Key { get; set; }
+    public object? Payload { get; set; }
+    public bool Disabled { get; set; }
+    public bool Visible { get; set; } = true;
+    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? Text { get; set; }
+    public string? Title { get; set; }
+    public string? Value { get; set; }
+}
+
+private ICollection<Product>? virtualizeCustoms1;
+private ICollection<Product>? virtualizeCustoms2;
+
+private IEnumerable<Product> initialSelectedItem = [
+    new()
+    {
+        Text = ""Product 100"",
+        Value = ""100"",
+        Payload = new ProductDto {
+            Id = 100,
+            Price = 60,
+            Name = ""Product 100""
+        },
+        Label = ""Product 100"",
+        Type = BitDropdownItemType.Normal
+    }
+];
+
+private IEnumerable<Product> initialSelectedItems = [
+    new()
+    {
+        Text = ""Product 100"",
+        Value = ""100"",
+        Payload = new ProductDto {
+            Id = 100,
+            Price = 60,
+            Name = ""Product 100""
+        },
+        Label = ""Product 100"",
+        Type = BitDropdownItemType.Normal
+    },
+    new()
+    {
+        Text = ""Product 99"",
+        Value = ""99"",
+        Payload = new ProductDto {
+            Id = 99,
+            Price = 75,
+            Name = ""Product 99""
+        },
+        Label = ""Product 99"",
+        Type = BitDropdownItemType.Normal
+    }
+];
 
-public class Product
+protected override void OnInitialized()
 {
-    public string? Label { get; set; }
-    public string? Key { get; set; }
-    public object? Payload { get; set; }
-    public bool Disabled { get; set; }
-    public bool Visible { get; set; } = true;
-    public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
-    public string? Text { get; set; }
-    public string? Title { get; set; }
-    public string? Value { get; set; }
-}
+    virtualizeCustoms1 = Enumerable.Range(1, 10_000)
+                                   .Select(p => new Product { Text = $""Produce {p}"", Value = p.ToString() })
+                                   .ToArray();
 
-private List<Product> comboBoxCustoms = new()
-{
-    new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
-    new() { Text = ""Apple"", Value = ""f-app"" },
-    new() { Text = ""Banana"", Value = ""f-ban"" },
-    new() { Text = ""Orange"", Value = ""f-ora"", Disabled = true },
-    new() { Text = ""Grape"", Value = ""f-gra"" },
-    new() { Type = BitDropdownItemType.Divider },
-    new() { Text = ""Vegetables"", Type = BitDropdownItemType.Header },
-    new() { Text = ""Broccoli"", Value = ""v-bro"" },
-    new() { Text = ""Carrot"", Value = ""v-car"" },
-    new() { Text = ""Lettuce"", Value = ""v-let"" }
-};
+    virtualizeCustoms2 = Enumerable.Range(1, 10_000)
+                                   .Select(p => new Product { Text = $""Produce {p}"", Value = p.ToString() })
+                                   .ToArray();
+}
 
-private BitDropdownNameSelectors<Product, string> comboBoxNameSelectors = new()
+private BitDropdownNameSelectors<Product, string?> nameSelectors = new()
 {
     AriaLabel = { Selector = c => c.Label },
-    Class = { Selector = c => c.CssClass },
     Id = { Selector = c => c.Key },
     Data = { Selector = c => c.Payload },
     IsEnabled = { Selector = c => c.Disabled is false },
     IsHidden = { Selector = c => c.Visible is false },
     ItemType = { Selector = c => c.Type },
-    Style = { Selector = c => c.CssStyle },
     Text = { Selector = c => c.Text },
     Title = { Selector = c => c.Title },
     Value = { Selector = c => c.Value },
-    ValueSetter = (Product item, string value) => item.Value = value,
-    TextSetter = (string? text, Product item) => item.Text = text
-};";
+};
 
-    private readonly string example15RazorCode = @"
-<BitDropdown @bind-Value=""comboBoxValueSample3""
-             Combo Dynamic Responsive
-             Items=""comboBoxCustoms""
-             Placeholder=""Select an option""
-             NameSelectors=""comboBoxNameSelectors""
-             Label=""Single select combo box & dynamic""
-             OnDynamicAdd=""(Product item) => HandleOnDynamicAdd(item)""
-             DynamicValueGenerator=""@((Product item) => item.Text ?? """")"" />
-<div>Value: @comboBoxValueSample3</div>
+private async ValueTask<BitDropdownItemsProviderResult<Product>> LoadItems(
+    BitDropdownItemsProviderRequest<Product> request)
+{
+    try
+    {
+        // https://docs.microsoft.com/en-us/odata/concepts/queryoptions-overview
 
-<BitDropdown @bind-Value=""comboBoxValueSample4""
-             Responsive
-             Combo Chips Dynamic
-             Items=""comboBoxCustoms""
-             Placeholder=""Select an option""
-             NameSelectors=""comboBoxNameSelectors""
-             Label=""Single select combo box, chips & dynamic""
-             OnDynamicAdd=""(Product item) => HandleOnDynamicAdd(item)""
-             DynamicValueGenerator=""@((Product item) => item.Text ?? """")"" />
-<div>Value: @comboBoxValueSample4</div>
+        var query = new Dictionary<string, object?>()
+        {
+            { ""$top"", request.Count == 0 ? 50 : request.Count },
+            { ""$skip"", request.StartIndex }
+        };
 
-<BitDropdown @bind-Values=""comboBoxValues3""
-             Responsive
+        if (string.IsNullOrEmpty(request.Search) is false)
+        {
+            query.Add(""$filter"", $""contains(Name,'{request.Search}')"");
+        }
+
+        var url = NavManager.GetUriWithQueryParameters(""api/Products/GetProducts"", query);
+
+        var data = await HttpClient.GetFromJsonAsync(url, AppJsonContext.Default.PagedResultProductDto);
+
+        var items = data!.Items.Select(i => new Product
+        {
+            Text = i.Name,
+            Value = i.Id.ToString(),
+            Payload = i,
+            Label = i.Name,
+            Disabled = false,
+            Type = BitDropdownItemType.Normal
+        }).ToList();
+
+        return BitDropdownItemsProviderResult.From(items, data!.TotalCount);
+    }
+    catch
+    {
+        return BitDropdownItemsProviderResult.From(new List<Product>(), 0);
+    }
+}";
+
+    private readonly string example24RazorCode = @"
+<BitDropdown Label=""Primary""
              MultiSelect
-             Combo Chips Dynamic
-             Items=""comboBoxCustoms""
-             Placeholder=""Select options""
-             NameSelectors=""comboBoxNameSelectors""
-             Label=""Multi select combo box, chips & dynamic""
-             OnDynamicAdd=""(Product item) => HandleOnDynamicAdd(item)""
-             DynamicValueGenerator=""@((Product item) => item.Text ?? """")"" />
-<div>Values: @string.Join(',', comboBoxValues3)</div>";
-    private readonly string example15CsharpCode = @"
-private string comboBoxValueSample3 = default!;
-private string comboBoxValueSample4 = default!;
-private ICollection<string> comboBoxValues3 = [];
+             Color=""BitColor.Primary""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items"" />
 
-private void HandleOnDynamicAdd(Product item)
-{
-    comboBoxCustoms.Add(item);
-}
+<BitDropdown Label=""Secondary""
+             MultiSelect
+             Color=""BitColor.Secondary""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items"" />
 
+<BitDropdown Label=""Tertiary""
+             MultiSelect
+             Color=""BitColor.Tertiary""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items"" />
+
+<BitDropdown Label=""Info""
+             MultiSelect
+             Color=""BitColor.Info""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items"" />
+
+<BitDropdown Label=""Success""
+             MultiSelect
+             Color=""BitColor.Success""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items"" />
+
+<BitDropdown Label=""Warning""
+             MultiSelect
+             Color=""BitColor.Warning""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items"" />
+
+<BitDropdown Label=""SevereWarning""
+             MultiSelect
+             Color=""BitColor.SevereWarning""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items"" />
+
+<BitDropdown Label=""Error""
+             MultiSelect
+             Color=""BitColor.Error""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             Placeholder=""Select items"" />";
+    private readonly string example24CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
@@ -1239,7 +2101,7 @@ public class Product
     public string? Value { get; set; }
 }
 
-private List<Product> comboBoxCustoms = new()
+private List<Product> GetBasicCustoms() => new()
 {
     new() { Text = ""Fruits"", Type = BitDropdownItemType.Header },
     new() { Text = ""Apple"", Value = ""f-app"" },
@@ -1253,24 +2115,20 @@ public class Product
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };
 
-private BitDropdownNameSelectors<Product, string> comboBoxNameSelectors = new()
+private BitDropdownNameSelectors<Product, string?> nameSelectors = new()
 {
     AriaLabel = { Selector = c => c.Label },
-    Class = { Selector = c => c.CssClass },
     Id = { Selector = c => c.Key },
     Data = { Selector = c => c.Payload },
     IsEnabled = { Selector = c => c.Disabled is false },
     IsHidden = { Selector = c => c.Visible is false },
     ItemType = { Selector = c => c.Type },
-    Style = { Selector = c => c.CssStyle },
     Text = { Selector = c => c.Text },
     Title = { Selector = c => c.Title },
     Value = { Selector = c => c.Value },
-    ValueSetter = (Product item, string value) => item.Value = value,
-    TextSetter = (string? text, Product item) => item.Text = text
 };";
 
-    private readonly string example16RazorCode = @"
+    private readonly string example25RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 <link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
 
@@ -1293,6 +2151,7 @@ public class Product
              ChipsRemoveIcon=""@BitIconInfo.Css(""bi bi-x-circle"")""
              Items=""GetBasicCustoms()""
              NameSelectors=""nameSelectors""
+             DefaultValues=""@(Array.Empty<string>())""
              Placeholder=""Select items"" />
         
 <BitDropdown Label=""Search box icons (external)""
@@ -1303,6 +2162,14 @@ public class Product
              NameSelectors=""nameSelectors""
              Placeholder=""Select an item"" />
 
+<BitDropdown Label=""Item check icon (external)""
+             MultiSelect
+             ItemCheckIcon=""@BitIconInfo.Css(""fa-solid fa-heart"")""
+             Items=""GetBasicCustoms()""
+             NameSelectors=""nameSelectors""
+             DefaultValues=""@(Array.Empty<string>())""
+             Placeholder=""Select items"" />
+
 <BitDropdown Label=""Item icons (IconName - Fluent UI)""
              Items=""GetExternalIconCustoms()""
              NameSelectors=""nameSelectors""
@@ -1317,15 +2184,17 @@ public class Product
              Items=""GetExternalIconBiCustoms()""
              NameSelectors=""nameSelectors""
              Placeholder=""Select an item"" />";
-    private readonly string example16CsharpCode = @"
+    private readonly string example25CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
+    public string? CssClass { get; set; }
     public string? Key { get; set; }
     public object? Payload { get; set; }
     public bool Disabled { get; set; }
     public bool Visible { get; set; } = true;
     public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
+    public string? CssStyle { get; set; }
     public string? Text { get; set; }
     public string? Title { get; set; }
     public string? Value { get; set; }
@@ -1406,63 +2275,31 @@ public class Product
     IconName = { Selector = c => c.IconName },
 };";
 
-    private readonly string example17RazorCode = @"
-<BitDropdown Label=""Primary""
-             MultiSelect
-             Color=""BitColor.Primary""
-             Items=""GetBasicCustoms()""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select items"" />
-
-<BitDropdown Label=""Secondary""
-             MultiSelect
-             Color=""BitColor.Secondary""
-             Items=""GetBasicCustoms()""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select items"" />
-
-<BitDropdown Label=""Tertiary""
-             MultiSelect
-             Color=""BitColor.Tertiary""
-             Items=""GetBasicCustoms()""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select items"" />
-
-<BitDropdown Label=""Info""
-             MultiSelect
-             Color=""BitColor.Info""
-             Items=""GetBasicCustoms()""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select items"" />
-
-<BitDropdown Label=""Success""
-             MultiSelect
-             Color=""BitColor.Success""
-             Items=""GetBasicCustoms()""
-             NameSelectors=""nameSelectors""
-             Placeholder=""Select items"" />
-
-<BitDropdown Label=""Warning""
-             MultiSelect
-             Color=""BitColor.Warning""
+    private readonly string example26RazorCode = @"
+<BitDropdown Label=""Small""
+             ShowSearchBox
              Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
              NameSelectors=""nameSelectors""
-             Placeholder=""Select items"" />
+             Size=""BitSize.Small""
+             Placeholder=""Select an item"" />
 
-<BitDropdown Label=""SevereWarning""
-             MultiSelect
-             Color=""BitColor.SevereWarning""
+<BitDropdown Label=""Medium""
+             ShowSearchBox
              Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
              NameSelectors=""nameSelectors""
-             Placeholder=""Select items"" />
+             Size=""BitSize.Medium""
+             Placeholder=""Select an item"" />
 
-<BitDropdown Label=""Error""
-             MultiSelect
-             Color=""BitColor.Error""
+<BitDropdown Label=""Large""
+             ShowSearchBox
              Items=""GetBasicCustoms()""
+             DefaultValue=""@string.Empty""
              NameSelectors=""nameSelectors""
-             Placeholder=""Select items"" />";
-    private readonly string example17CsharpCode = @"
+             Size=""BitSize.Large""
+             Placeholder=""Select an item"" />";
+    private readonly string example26CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
@@ -1492,18 +2329,13 @@ public class Product
 
 private BitDropdownNameSelectors<Product, string?> nameSelectors = new()
 {
-    AriaLabel = { Selector = c => c.Label },
-    Id = { Selector = c => c.Key },
-    Data = { Selector = c => c.Payload },
-    IsEnabled = { Selector = c => c.Disabled is false },
-    IsHidden = { Selector = c => c.Visible is false },
-    ItemType = { Selector = c => c.Type },
     Text = { Selector = c => c.Text },
-    Title = { Selector = c => c.Title },
     Value = { Selector = c => c.Value },
+    ItemType = { Selector = c => c.Type },
+    IsEnabled = { Selector = c => c.Disabled is false },
 };";
 
-    private readonly string example18RazorCode = @"
+    private readonly string example27RazorCode = @"
 <style>
     .custom-class {
         margin-inline: 1rem;
@@ -1581,7 +2413,7 @@ public class Product
                                 Container = ""custom-container"",
                                 ItemButton = ""custom-item-button"",
                                 ScrollContainer = ""custom-scroll-container"" })"" />";
-    private readonly string example18CsharpCode = @"
+    private readonly string example27CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
@@ -1640,7 +2472,7 @@ public class Product
     Value = { Selector = c => c.Value },
 };";
 
-    private readonly string example19RazorCode = @"
+    private readonly string example28RazorCode = @"
 <BitDropdown Label=""تک انتخابی""
              Dir=""BitDir.Rtl""
              Items=""GetRtlCustoms()""
@@ -1660,7 +2492,7 @@ public class Product
              Items=""GetRtlCustoms()""
              NameSelectors=""nameSelectors""
              Placeholder=""لطفا انتخاب کنید"" />";
-    private readonly string example19CsharpCode = @"
+    private readonly string example28CsharpCode = @"
 public class Product
 {
     public string? Label { get; set; }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
index 5f36a115f8..866136bc61 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor
@@ -1,5 +1,13 @@
 <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
-    <div>Displays basic dropdowns demonstrating single and multi-select options, including required and disabled states.</div>
+    <div>
+        BitDropdown in its simplest forms: single and multi select dropdowns, a required one (which marks its label and
+        reports itself as required to assistive technologies), one preserving its original callout width instead of
+        matching the width of the dropdown, and a custom delimiter for joining the selected values in multi select mode.
+        A <b>disabled</b> dropdown cannot be focused or opened at all, while a <b>read-only</b> one stays focusable and
+        its callout can still be browsed &mdash; only changing the selection is blocked, and every control that would
+        change it (the clear button, the chip remove buttons) is hidden accordingly.
+        The <b>Title</b> parameter adds the tooltip shown while the pointer rests on the dropdown.
+    </div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Single select"
@@ -29,11 +37,35 @@
                      Items="GetBasicItems()"
                      DefaultValue="@("f-ora")"
                      Placeholder="Select an item" />
+        <br /><br />
+        <BitDropdown Label="ReadOnly"
+                     ReadOnly
+                     Items="GetBasicItems()"
+                     DefaultValue="@("f-app")"
+                     Placeholder="Select an item" />
+        <br /><br />
+        <BitDropdown Label="Custom delimiter"
+                     MultiSelect
+                     MultiSelectDelimiter=" - "
+                     Items="GetBasicItems()"
+                     DefaultValues="@(new[] { "f-app", "f-ban" })"
+                     Placeholder="Select items" />
+        <br /><br />
+        <BitDropdown Label="Title"
+                     Title="Pick your favorite fruit or vegetable"
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Hover me" />
     </div>
 </DemoExample>
 
 <DemoExample Title="Prefix & Suffix" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2" PreventRenderForMcpClient>
-    <div>Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.</div>
+    <div>
+        The <b>Prefix</b> and <b>Suffix</b> parameters put fixed text before and after the selected value &mdash; a
+        unit, a currency, a category &mdash; and <b>PrefixTemplate</b> and <b>SuffixTemplate</b> replace them with any
+        content, an icon for instance. They are decoration only: they are not part of the value and are not read out
+        with it, so keep a descriptive <b>Label</b> for screen reader users.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Prefix"
@@ -58,6 +90,19 @@
                      TItem="BitDropdownItem<string>"
                      TValue="string" />
         <br /><br />
+        <BitDropdown Label="Templates"
+                     Items="GetBasicItems()"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownItem<string>"
+                     TValue="string">
+            <PrefixTemplate>
+                <BitIcon IconName="@BitIconName.ShoppingCart" Style="padding-inline:0.5rem" />
+            </PrefixTemplate>
+            <SuffixTemplate>
+                <BitIcon IconName="@BitIconName.Info" Style="padding-inline:0.5rem" />
+            </SuffixTemplate>
+        </BitDropdown>
+        <br /><br />
         <BitDropdown Label="Disabled"
                      Prefix="Fruits:"
                      Suffix="kg"
@@ -70,7 +115,11 @@
 </DemoExample>
 
 <DemoExample Title="FitWidth" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3" PreventRenderForMcpClient>
-    <div>Enables fit-content width for the dropdown that sets the width of the component based on its content size.</div>
+    <div>
+        The <b>FitWidth</b> parameter makes the dropdown only as wide as its content instead of stretching to the full
+        width of its container, which suits toolbars and inline filters where a full-width control would look out of
+        place. The callout still matches the width of the dropdown unless <b>PreserveCalloutWidth</b> is set.
+    </div>
     <br /><br />
     <BitDropdown Label="Single select"
                  FitWidth
@@ -86,8 +135,12 @@
                  DefaultValue="@string.Empty" />
 </DemoExample>
 
-<DemoExample Title="NoBorder" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4" PreventRenderForMcpClient>
-    <div>The dropdown can be rendered without any border.</div>
+<DemoExample Title="NoBorder & Transparent" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4" PreventRenderForMcpClient>
+    <div>
+        The <b>NoBorder</b> parameter removes the border of the dropdown and <b>Transparent</b> removes its background,
+        so the control can sit on a colored or image surface without cutting a box out of it. They are independent and
+        combine freely; the callout keeps its own surface either way, so the items stay readable.
+    </div>
     <br /><br />
     <div style="max-width:10rem">
         <BitDropdown NoBorder
@@ -100,11 +153,23 @@
                      Items="GetBasicItems()"
                      Placeholder="Select items"
                      DefaultValue="@string.Empty" />
+        <br /><br />
+        <div style="padding:0.5rem;border-radius:0.5rem;background:linear-gradient(90deg,#ff00cc7f,#3333997f)">
+            <BitDropdown Transparent
+                         Items="GetBasicItems()"
+                         DefaultValue="@string.Empty"
+                         Placeholder="Select an item" />
+        </div>
     </div>
 </DemoExample>
 
 <DemoExample Title="Responsive" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5" PreventRenderForMcpClient>
-    <div>When the <b>IsResponsive</b> parameter is true, on small screens the drop down items will render in a side panel.</div>
+    <div>
+        When the <b>Responsive</b> parameter is true, the callout turns into a side panel on small screens instead of a
+        floating list, making long item lists easier to use on mobile devices. The panel carries the label of the
+        dropdown and a close button, and it can also be dismissed by swiping it away. Resize the window below the small
+        breakpoint to see it.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Responsive Dropdown"
@@ -116,7 +181,13 @@
 </DemoExample>
 
 <DemoExample Title="Drop direction" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6" PreventRenderForMcpClient>
-    <div>Explores different drop directions for the BitDropdown component, including automatic and explicit directions.</div>
+    <div>
+        The <b>DropDirection</b> parameter determines which directions the callout is allowed to open in. <b>All</b>
+        picks whichever side fits best in the viewport, while <b>TopAndBottom</b> (the default) restricts it to opening
+        above or below the dropdown. In both cases the callout flips to the opposite side when there is not enough room,
+        and its item list is capped to the space that is actually available, so it never runs past the edge of the
+        screen. Scroll the page so that these dropdowns sit near the top or the bottom of the viewport to see it.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="All"
@@ -134,7 +205,12 @@
 </DemoExample>
 
 <DemoExample Title="Clear button" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7" PreventRenderForMcpClient>
-    <div>Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.</div>
+    <div>
+        The <b>ShowClearButton</b> parameter adds a button that clears the current selection whenever the dropdown has
+        a value, in both single and multi select modes. Clearing raises the usual value change events, plus the
+        dedicated <b>OnClear</b> callback. The button is hidden while the dropdown is read-only or disabled, so it
+        never offers an action that would be ignored.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="clearValue"
@@ -153,11 +229,28 @@
                      Label="Multi select dropdown" />
         <br />
         <div>Values: @string.Join(',', clearValues)</div>
+        <br /><br /><br /><br />
+        <div><b>OnClear</b>:</div><br />
+        <BitDropdown ShowClearButton
+                     Items="GetBasicItems()"
+                     Label="Single select dropdown"
+                     DefaultValue="@("f-app")"
+                     Placeholder="Select an option"
+                     OnClear="() => clearCounter++" />
+        <br />
+        <div>OnClear count: @clearCounter</div>
     </div>
 </DemoExample>
 
 <DemoExample Title="SearchBox" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8" PreventRenderForMcpClient>
-    <div>Examples of dropdowns with search functionality, including default and custom search functions.</div>
+    <div>
+        The <b>ShowSearchBox</b> parameter adds a search input at the top of the callout to filter the items, and
+        <b>SearchBoxPlaceholder</b> sets its placeholder. By default an item matches when its text contains the typed
+        term, ignoring case; <b>SearchFunction</b> replaces that algorithm with any predicate of your own (the examples
+        below switch it to a starts-with and an ends-with match). <b>AutoFocusSearchBox</b> puts the caret in the search
+        input as soon as the callout opens, so typing filters right away. The search term is discarded whenever the
+        callout closes, so the next opening always starts from the full list.
+    </div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Single select & auto focus"
@@ -201,11 +294,63 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Immediate search" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9" PreventRenderForMcpClient>
+<DemoExample Title="Search options" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9" PreventRenderForMcpClient>
+    <div>
+        Three parameters tune the default search without replacing it. <b>SearchMode</b> picks how the text of an item
+        is matched against the typed term &mdash; <b>Contains</b> (the default), <b>StartsWith</b>, <b>EndsWith</b> or
+        <b>ExactMatch</b>, always ignoring case. <b>MinSearchLength</b> holds the filtering back until the term reaches the
+        given number of characters, which keeps a one-letter term from being treated as a real query (and, with an
+        <b>ItemsProvider</b>, from turning every first keystroke into a request). <b>HighlightSearch</b> emphasizes the
+        matched part of each item text so the reason an item is in the result is visible at a glance. Whenever a search
+        is active the number of results is also announced to screen readers, with a message you can localize through
+        the <b>SearchResultsText</b> parameter.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="SearchMode: StartsWith"
+                     ShowSearchBox
+                     AutoFocusSearchBox
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Type a first letter"
+                     SearchMode="BitDropdownSearchMode.StartsWith" />
+        <br /><br />
+        <BitDropdown Label="MinSearchLength: 3"
+                     ShowSearchBox
+                     AutoFocusSearchBox
+                     MinSearchLength="3"
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Type at least 3 characters" />
+        <br /><br />
+        <BitDropdown Label="HighlightSearch"
+                     ShowSearchBox
+                     AutoFocusSearchBox
+                     HighlightSearch
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search item" />
+        <br /><br />
+        <BitDropdown Label="Highlight in the ComboBox"
+                     Combo
+                     HighlightSearch
+                     Items="comboBoxItems"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Type to filter" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Immediate search" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10" PreventRenderForMcpClient>
     <div>
-        By default, the search and combo box inputs raise their search as you commit the input (on the change event).
-        Enabling <b>Immediate</b> makes the search happen as you type (on the input event). You can also rate-limit the
-        immediate search using <b>DebounceTime</b> or <b>ThrottleTime</b> (in milliseconds).
+        By default the search box raises its search when the input is committed (on the change event). Enabling
+        <b>Immediate</b> makes it search as you type (on the input event) instead. Because that can mean a request per
+        keystroke with a remote data source, the immediate search can be rate-limited: <b>DebounceTime</b> waits until
+        the typing pauses for the given number of milliseconds and then searches once, while <b>ThrottleTime</b> lets
+        at most one search through per interval while the typing continues. The <b>OnSearch</b> event reports every
+        search term that gets through.
     </div>
     <br /><br />
     <div class="example-content">
@@ -240,8 +385,13 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Validation" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10" PreventRenderForMcpClient>
-    <div>Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.</div>
+<DemoExample Title="Validation" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11" PreventRenderForMcpClient>
+    <div>
+        BitDropdown is a regular form input: inside an <b>EditForm</b> it takes part in data annotations validation,
+        turns red and reports itself as invalid to assistive technologies when its field has an error, and renders a
+        <b>ValidationMessage</b> like any other input. This example requires a value in the single select dropdown and
+        keeps the number of selected items of the multi select one within a range.
+    </div>
     <br />
     <div class="example-content">
         @if (string.IsNullOrEmpty(successMessage))
@@ -278,8 +428,17 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Customization" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11" PreventRenderForMcpClient>
-    <div>Shows how to customize dropdowns using templates for header, text, item, placeholder, label, and callout sections.</div>
+<DemoExample Title="Customization" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12" PreventRenderForMcpClient>
+    <div>
+        Nearly every part of the dropdown can be replaced with your own content. <b>ItemTemplate</b> and
+        <b>HeaderTemplate</b> render the normal items and the group headers of the callout, <b>TextTemplate</b> renders
+        the selected value shown on the closed dropdown and <b>PlaceholderTemplate</b> what is shown while nothing is
+        selected, <b>LabelTemplate</b> replaces the label, <b>CaretDownIconName</b> and <b>CaretDownTemplate</b> the
+        chevron, and <b>CalloutHeaderTemplate</b> and <b>CalloutFooterTemplate</b> add fixed content above and below the
+        scrollable item list &mdash; the footer being the usual home of an "add a new item" action. The templates that
+        render an item receive the item itself, so the extra state carried in its <b>Data</b> property is available to
+        them.
+    </div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Header template"
@@ -342,6 +501,15 @@
                      Placeholder="Select an item"
                      CaretDownIconName="@BitIconName.ScrollUpDown" />
         <br /><br />
+        <BitDropdown Label="CaretDownTemplate"
+                     Items="GetDataItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item">
+            <CaretDownTemplate>
+                <BitIcon IconName="@BitIconName.FavoriteStar" Style="font-size:0.875rem" />
+            </CaretDownTemplate>
+        </BitDropdown>
+        <br /><br />
         <BitDropdown Label="Callout templates"
                      Items="GetBasicItems()"
                      DefaultValue="@string.Empty"
@@ -356,8 +524,17 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Binding" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12" PreventRenderForMcpClient>
-    <div>Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.</div>
+<DemoExample Title="Binding" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13" PreventRenderForMcpClient>
+    <div>
+        Every piece of the dropdown's state can be bound or observed. The selection is two-way bound over <b>Value</b>
+        in single select mode and <b>Values</b> in multi select mode, or left uncontrolled with <b>DefaultValue</b> and
+        <b>DefaultValues</b> and observed through the <b>OnChange</b> and <b>OnValuesChange</b> events;
+        <b>OnSelectItem</b> hands over the clicked item itself rather than its value. <b>Reselectable</b> makes the
+        select events fire even when the already selected item is picked again, which is otherwise treated as a no-op.
+        The open state of the callout is two-way bound via <b>IsOpen</b>, so it can be opened and closed from code, and
+        the <b>OnOpen</b> and <b>OnClose</b> events report every change to it &mdash; a natural place to start fetching
+        the items on first open.
+    </div>
     <br /><br />
     <div class="example-content">
         <div><b>Two-way binding</b>:</div><br />
@@ -411,11 +588,46 @@
                      OnSelectItem="(BitDropdownItem<string> item) => selectedItem2 = item" />
         <br />
         <div>Selected Value: @selectedItem2?.Value</div>
+        <br /><br /><br /><br />
+        <div><b>Reselectable</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Reselectable
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     OnSelectItem="(BitDropdownItem<string> item) => selectItemCounter++" />
+        <br />
+        <div>OnSelectItem count: @selectItemCounter</div>
+        <br /><br /><br /><br />
+        <div><b>IsOpen</b>:</div><br />
+        <BitButton OnClick="() => isDropdownOpen = true">Open the dropdown</BitButton>
+        <br /><br />
+        <BitDropdown @bind-IsOpen="isDropdownOpen"
+                     Label="Single select"
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
+        <br /><br /><br /><br />
+        <div><b>OnOpen & OnClose</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     OnOpen="HandleOnCalloutOpen"
+                     OnClose="HandleOnCalloutClose" />
+        <br />
+        <div>The callout is @calloutState.</div>
     </div>
 </DemoExample>
 
-<DemoExample Title="ComboBox" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13" PreventRenderForMcpClient>
-    <div>When the <b>Combo</b> parameter is true, you can type in BitDropdown input and search between items.</div>
+<DemoExample Title="ComboBox" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14" PreventRenderForMcpClient>
+    <div>
+        The <b>Combo</b> parameter turns the dropdown into a ComboBox: an editable input renders in place of the selected
+        text and filters the items as you type, so the trigger doubles as the search box. <b>Enter</b> selects the item
+        whose text matches what was typed, <b>Backspace</b> on an empty input removes the last selected item, the arrow
+        keys open the callout, and a term that was typed but never turned into a selection is discarded when the callout
+        closes, so the input goes back to showing the current selection.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample1"
@@ -439,8 +651,12 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Chips" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14" PreventRenderForMcpClient>
-    <div>When the <b>Chips</b> parameter is true, shows the selected items like chips in the ComboBox.</div>
+<DemoExample Title="Chips" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15" PreventRenderForMcpClient>
+    <div>
+        When the <b>Chips</b> parameter is true, the selected items render as chips inside the dropdown instead of one
+        joined text, each with its own remove button that is reachable with the keyboard and announced with the text of
+        the item it removes. It works in both single and multi select modes and pairs naturally with the ComboBox mode.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample2"
@@ -464,8 +680,74 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Dynamic ComboBox" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
-    <div>When the <b>Dynamic</b> parameter is true, you can add a new item in the ComboBox.</div>
+<DemoExample Title="Selection display" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16" PreventRenderForMcpClient>
+    <div>
+        A multi select dropdown that lists every selected item quickly runs out of room. <b>MaxDisplayedItems</b> caps
+        how many of them the closed dropdown shows: with <b>Chips</b> the extra ones collapse into an overflow chip
+        whose text comes from <b>OverflowTextFormat</b> (<b>"+{0}"</b> by default), and without chips the joined list
+        is replaced by the summary of <b>SelectedItemsTextFormat</b> (<b>"{0} items selected"</b> by default) as soon
+        as the limit is passed. Nothing is removed from the selection &mdash; only the way it is displayed changes.
+        <br /><br />
+        <b>AutoClearSearch</b> covers the other half of a multi select session: the callout stays open after a pick, so
+        by default the next item has to be found through the filter left over from the previous one. Enabling it clears
+        the search text after every selection instead.
+        <b>HideSelectedItems</b> goes one step further and drops the picked items out of the callout altogether, which
+        makes sense when the chips already show what is selected and the list is only about what is left to choose.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="MaxDisplayedItems (chips)"
+                     Chips
+                     MultiSelect
+                     MaxDisplayedItems="2"
+                     Items="GetBasicItems()"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban", "f-gra", "v-car" })" />
+        <br /><br />
+        <BitDropdown Label="OverflowTextFormat"
+                     Chips
+                     MultiSelect
+                     MaxDisplayedItems="2"
+                     OverflowTextFormat="and {0} more"
+                     Items="GetBasicItems()"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban", "f-gra", "v-car" })" />
+        <br /><br />
+        <BitDropdown Label="SelectedItemsTextFormat"
+                     MultiSelect
+                     MaxDisplayedItems="2"
+                     SelectedItemsTextFormat="{0} fruits and vegetables"
+                     Items="GetBasicItems()"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban", "f-gra", "v-car" })" />
+        <br /><br />
+        <BitDropdown Label="AutoClearSearch"
+                     Combo Chips
+                     MultiSelect
+                     AutoClearSearch
+                     Items="comboBoxItems"
+                     DefaultValues="@(Array.Empty<string>())"
+                     Placeholder="Type to filter, then pick" />
+        <br /><br />
+        <BitDropdown Label="HideSelectedItems"
+                     Chips
+                     MultiSelect
+                     HideSelectedItems
+                     Items="GetBasicItems()"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban" })" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Dynamic ComboBox" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17">
+    <div>
+        When the <b>Dynamic</b> parameter is true, a text typed into the ComboBox that matches no existing item can be
+        added as a new one, which is what makes free-form values (tags, e-mail recipients, ad-hoc categories) possible.
+        <b>DynamicValueGenerator</b> produces the value of the new item from its text and <b>OnDynamicAdd</b> notifies
+        about the addition so the item can be persisted into the source collection. Before creating anything the
+        component first looks for an existing match; <b>FindItemFunction</b> and <b>ExistsSelectedItemFunction</b>
+        replace the default case-insensitive text comparison used for those two lookups.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample3"
@@ -480,7 +762,7 @@
         <div>Value: @comboBoxValueSample3</div>
     </div>
     <br /><br /><br /><br />
-    <div>When the <b>Combo</b>, <b>Chips</b> and <b>Dynamic</b> parameters are true, you can add a new item in the ComboBox (pressing the enter key or touching the add button on the mobile).</div>
+    <div>Combining the <b>Combo</b>, <b>Chips</b> and <b>Dynamic</b> parameters, new items get added by pressing the enter key (or the add button of the responsive panel on mobile) and render as removable chips.</div>
     <br />
     <div class="example-content">
         <br />
@@ -509,82 +791,277 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16" PreventRenderForMcpClient>
+<DemoExample Title="Keyboard navigation" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18" PreventRenderForMcpClient>
     <div>
-        Use icons from external libraries like FontAwesome and Bootstrap Icons with the <b>CaretDownIcon</b>, 
-        <b>ClearButtonIcon</b>, <b>ChipsRemoveIcon</b>, <b>SearchBoxIcon</b>, <b>SearchBoxClearIcon</b>, and 
-        <b>ResponsiveCloseIcon</b> parameters on the dropdown and the <b>Icon</b> or <b>IconName</b> 
-        properties on <b>BitDropdownItem</b>.
+        The dropdown is fully operable with the keyboard, following the ARIA authoring practices for a combobox:
+        <b>Enter</b>, <b>Space</b> and the arrow keys open the callout and put the focus on the selected item (or the
+        first one), <b>ArrowUp</b> and <b>ArrowDown</b> move between the items, <b>Home</b> and <b>End</b> jump to the
+        first and the last one, <b>PageUp</b> and <b>PageDown</b> jump several items at a time, <b>Enter</b> and <b>Space</b>
+        select the focused item, <b>Escape</b> and <b>Alt+ArrowUp</b> close the callout and return the focus to the
+        dropdown, and <b>Tab</b> closes it and moves on. Typing printable characters runs a typeahead: the accumulated characters jump to the
+        item starting with them, repeating one character cycles through the items starting with it, and the buffer
+        resets after a short pause. Disabled and hidden items are skipped throughout. In virtualize mode only the
+        rendered items take part in the typeahead, since the ones that have not been rendered yet have no text to
+        match against.
     </div>
-    
     <br />
-    <br />
-    
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
-
     <div class="example-content">
-        <BitDropdown Label="Caret down icon (external)"
-                     CaretDownIcon="@BitIconInfo.Css("fa-solid fa-circle-chevron-down")"
+        <BitDropdown Label="Single select"
                      Items="GetBasicItems()"
                      DefaultValue="@string.Empty"
                      Placeholder="Select an item" />
-
         <br /><br />
-
-        <BitDropdown Label="Clear button icon (external)"
-                     ShowClearButton
-                     ClearButtonIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
+        <BitDropdown Label="Multi select"
+                     MultiSelect
                      Items="GetBasicItems()"
-                     DefaultValue="@string.Empty"
-                     Placeholder="Select an item" />
+                     Placeholder="Select items"
+                     DefaultValue="@string.Empty" />
+    </div>
+</DemoExample>
 
+<DemoExample Title="Select all" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
+    <div>
+        When the <b>ShowSelectAll</b> parameter is true, a select all item renders above the item list of a multi select
+        dropdown. It selects everything with one click and clears everything with the next, and its check box shows an
+        indeterminate state while only some of the items are selected, so it doubles as a summary of the current
+        selection. It only ever applies to what the user can actually see: disabled items are skipped, and while a
+        search is active it selects the search result rather than the whole list, leaving selections made outside the
+        result untouched. The <b>SelectAllText</b> parameter customizes its text. It is not available when the items
+        come from an <b>ItemsProvider</b>, since the items that are not loaded yet cannot be selected.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown @bind-Values="selectAllValues"
+                     MultiSelect
+                     ShowSelectAll
+                     Items="GetBasicItems()"
+                     Placeholder="Select items"
+                     Label="Select all" />
+        <br />
+        <div>Values: @string.Join(',', selectAllValues)</div>
         <br /><br />
+        <BitDropdown MultiSelect
+                     ShowSelectAll
+                     ShowSearchBox
+                     SelectAllText="Select all of them"
+                     Items="GetBasicItems()"
+                     Placeholder="Select items"
+                     DefaultValue="@string.Empty"
+                     SearchBoxPlaceholder="Search items"
+                     Label="Custom text & search" />
+    </div>
+</DemoExample>
 
-        <BitDropdown Label="Chips remove icon (external)"
-                     Chips
+<DemoExample Title="Selection limit" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20" PreventRenderForMcpClient>
+    <div>
+        The <b>MaxSelectedItems</b> parameter limits how many items can be selected in the multi select dropdown. Once
+        the limit is reached the unselected items are disabled rather than silently refusing the click, so the boundary
+        is visible before it is hit, and they become available again as soon as an item is unselected. The select all
+        item honors the same limit and stops adding items once it is reached.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown @bind-Values="maxSelectedValues"
                      MultiSelect
-                     ChipsRemoveIcon="@BitIconInfo.Css("bi bi-x-circle")"
+                     MaxSelectedItems="2"
                      Items="GetBasicItems()"
-                     DefaultValues="@(Array.Empty<string>())"
-                     Placeholder="Select items" />
+                     Placeholder="Select up to 2 items"
+                     Label="Max 2 items" />
+        <br />
+        <div>Values: @string.Join(',', maxSelectedValues)</div>
+    </div>
+</DemoExample>
 
+<DemoExample Title="Empty state" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21" PreventRenderForMcpClient>
+    <div>
+        When there is no item to show, the callout renders a message instead of an empty list. There are two distinct
+        cases and each gets its own text: <b>EmptyText</b> and <b>EmptyTemplate</b> cover a list that has nothing in it
+        ("No items found" by default), while <b>NoResultsText</b> and <b>NoResultsTemplate</b> cover a search that
+        matched nothing ("No results found" by default) &mdash; telling the user that their term found nothing is a
+        different message from telling them the list is empty. When the no-results pair is not set the empty pair is used
+        for both cases.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="Default"
+                     Items="emptyItems"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownItem<string>" TValue="string" />
         <br /><br />
-
-        <BitDropdown Label="Search box icons (external)"
+        <BitDropdown Label="EmptyText"
+                     Items="emptyItems"
+                     Placeholder="Select an item"
+                     EmptyText="There is nothing here!"
+                     TItem="BitDropdownItem<string>" TValue="string" />
+        <br /><br />
+        <BitDropdown Label="EmptyTemplate"
+                     Items="emptyItems"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownItem<string>" TValue="string">
+            <EmptyTemplate>
+                <div class="custom-drp custom-drp-empty">
+                    <BitIcon IconName="@BitIconName.SearchIssue" />
+                    <div>Nothing to show!</div>
+                </div>
+            </EmptyTemplate>
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="Search without result"
                      ShowSearchBox
-                     SearchBoxIcon="@BitIconInfo.Css("fa-solid fa-magnifying-glass")"
-                     SearchBoxClearIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
                      Items="GetBasicItems()"
                      DefaultValue="@string.Empty"
-                     Placeholder="Select an item" />
-
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search for anything" />
         <br /><br />
-
-        <BitDropdown Label="Item icons (IconName - Fluent UI)"
-                     Items="GetExternalIconItems()"
+        <BitDropdown Label="NoResultsText"
+                     ShowSearchBox
+                     Items="GetBasicItems()"
                      DefaultValue="@string.Empty"
                      Placeholder="Select an item"
-                     TItem="BitDropdownItem<string>" TValue="string" />
-
+                     SearchBoxPlaceholder="Search for anything"
+                     NoResultsText="Nothing matched your search" />
         <br /><br />
+        <BitDropdown Label="NoResultsTemplate"
+                     ShowSearchBox
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search for anything">
+            <NoResultsTemplate>
+                <div class="custom-drp custom-drp-empty">
+                    <BitIcon IconName="@BitIconName.SearchAndApps" />
+                    <div>No match. Try another term!</div>
+                </div>
+            </NoResultsTemplate>
+        </BitDropdown>
+    </div>
+</DemoExample>
 
-        <BitDropdown Label="Item icons (Icon - FontAwesome)"
-                     Items="GetExternalIconFaItems()"
+<DemoExample Title="Loading" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22" PreventRenderForMcpClient>
+    <div>
+        The <b>IsLoading</b> parameter reports that the items are still on their way: a spinner replaces the caret
+        down element and the callout shows a loading indicator in place of the item list, while the dropdown itself
+        stays enabled so the user can still open it and see what is happening. The message is customized with the
+        <b>LoadingText</b> parameter and the whole indicator with the <b>LoadingTemplate</b> parameter.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="IsLoading"
+                     IsLoading
+                     Items="GetBasicItems()"
                      DefaultValue="@string.Empty"
                      Placeholder="Select an item" />
-
         <br /><br />
+        <BitDropdown Label="LoadingText"
+                     IsLoading
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     LoadingText="Fetching the products..." />
+        <br /><br />
+        <BitDropdown Label="LoadingTemplate"
+                     IsLoading
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item">
+            <LoadingTemplate>
+                <div class="custom-drp custom-drp-empty">
+                    <BitIcon IconName="@BitIconName.Sync" />
+                    <div>Just a moment...</div>
+                </div>
+            </LoadingTemplate>
+        </BitDropdown>
+        <br /><br /><br /><br />
+        <div><b>A real fetch</b>: the items get loaded when the button is clicked.</div>
+        <br />
+        <BitButton OnClick="LoadDelayedItems" IsLoading="isLoadingItems">Load the items</BitButton>
+        <br /><br />
+        <BitDropdown Label="Products"
+                     IsLoading="isLoadingItems"
+                     Items="delayedItems"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
+    </div>
+</DemoExample>
 
-        <BitDropdown Label="Item icons (Icon - Bootstrap Icons)"
-                     Items="GetExternalIconBiItems()"
+<DemoExample Title="Virtualization" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23" PreventRenderForMcpClient>
+    <div>
+        The <b>Virtualize</b> parameter renders only the items that are currently visible instead of the whole list,
+        which keeps the callout fast with thousands of items; <b>ItemSize</b> tells it how tall an item is and
+        <b>OverscanCount</b> how many extra items to keep rendered around the visible window. It works over a local
+        <b>Items</b> collection, or over an <b>ItemsProvider</b> that fetches one page at a time from a server (and
+        receives the current search term, so filtering happens remotely too). Because a value can be selected before
+        the page holding its item has ever been fetched, <b>InitialSelectedItems</b> supplies those items up front so
+        the dropdown can show their text right away. The <b>VirtualizePlaceholder</b> template fills the rows that are
+        still being fetched.
+    </div>
+    <br /><br /><br />
+    <div class="example-content">
+        <div>With <b>Items</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Virtualize
+                     Items="virtualizeItems1"
                      DefaultValue="@string.Empty"
                      Placeholder="Select an item" />
+        <br />
+        <BitDropdown Label="Multi select"
+                     Virtualize
+                     MultiSelect
+                     ItemSize="35"
+                     OverscanCount="5"
+                     Items="virtualizeItems2"
+                     Placeholder="Select items"
+                     DefaultValue="@string.Empty" />
+        <br /><br /><br /><br />
+        <div>With <b>ItemsProvider</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Virtualize
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownItem<string>" TValue="string" />
+        <br />
+        <BitDropdown Label="Multi select"
+                     Virtualize
+                     MultiSelect
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select items"
+                     TItem="BitDropdownItem<string>" TValue="string" />
+        <br />
+        <BitDropdown Label="VirtualizePlaceholder"
+                     Virtualize
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownItem<string>" TValue="string">
+            <VirtualizePlaceholder>
+                <div style="padding:0 0.5rem;color:gray">Loading @(context.Index)...</div>
+            </VirtualizePlaceholder>
+        </BitDropdown>
+        <br /><br /><br /><br />
+        <div>With <b>ItemsProvider and InitialSelectedItems</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Virtualize
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select an item"
+                     InitialSelectedItems="initialSelectedItem"
+                     TItem="BitDropdownItem<string>" TValue="string" />
+        <br />
+        <BitDropdown Label="Multi select"
+                     Virtualize
+                     MultiSelect
+                     ItemsProvider="LoadItems"
+                     Placeholder="Select items"
+                     InitialSelectedItems="initialSelectedItems"
+                     TItem="BitDropdownItem<string>" TValue="string" />
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17" PreventRenderForMcpClient>
-    <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
+<DemoExample Title="Color" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24" PreventRenderForMcpClient>
+    <div>
+        The <b>Color</b> parameter paints the accents of the dropdown &mdash; the focus border, the search box
+        underline and icon, the group headers and the check boxes of the multi select items &mdash; in one of the theme
+        colors, <b>Primary</b> being the default. It changes the accents only, not the surface of the control, so the
+        dropdown keeps fitting its surroundings.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Primary"
@@ -653,8 +1130,131 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18" PreventRenderForMcpClient>
-    <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
+<DemoExample Title="External Icons" RazorCode="@example25RazorCode" CsharpCode="@example25CsharpCode" Id="example25" PreventRenderForMcpClient>
+    <div>
+        Every icon of the dropdown can come from an external library instead of the built-in Fluent UI set. The
+        <b>CaretDownIcon</b>, <b>ClearButtonIcon</b>, <b>ChipsRemoveIcon</b>, <b>SearchBoxIcon</b>,
+        <b>SearchBoxClearIcon</b>, <b>ResponsiveCloseIcon</b> and <b>ItemCheckIcon</b> parameters take a
+        <b>BitIconInfo</b> &mdash; built with <b>BitIconInfo.Fa</b>, <b>BitIconInfo.Bi</b> or the generic
+        <b>BitIconInfo.Css</b> &mdash; and each takes precedence over its <b>...IconName</b> counterpart when both are
+        set. The items themselves follow the same rule through their <b>Icon</b> and <b>IconName</b> members. Remember
+        to reference the stylesheet of the icon library you use.
+    </div>
+    
+    <br />
+    <br />
+    
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
+
+    <div class="example-content">
+        <BitDropdown Label="Caret down icon (external)"
+                     CaretDownIcon="@BitIconInfo.Css("fa-solid fa-circle-chevron-down")"
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
+
+        <br /><br />
+
+        <BitDropdown Label="Clear button icon (external)"
+                     ShowClearButton
+                     ClearButtonIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
+
+        <br /><br />
+
+        <BitDropdown Label="Chips remove icon (external)"
+                     Chips
+                     MultiSelect
+                     ChipsRemoveIcon="@BitIconInfo.Css("bi bi-x-circle")"
+                     Items="GetBasicItems()"
+                     DefaultValues="@(Array.Empty<string>())"
+                     Placeholder="Select items" />
+
+        <br /><br />
+
+        <BitDropdown Label="Search box icons (external)"
+                     ShowSearchBox
+                     SearchBoxIcon="@BitIconInfo.Css("fa-solid fa-magnifying-glass")"
+                     SearchBoxClearIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
+
+        <br /><br />
+
+        <BitDropdown Label="Item check icon (external)"
+                     MultiSelect
+                     ItemCheckIcon="@BitIconInfo.Css("fa-solid fa-heart")"
+                     Items="GetBasicItems()"
+                     DefaultValues="@(Array.Empty<string>())"
+                     Placeholder="Select items" />
+
+        <br /><br />
+
+        <BitDropdown Label="Item icons (IconName - Fluent UI)"
+                     Items="GetExternalIconItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownItem<string>" TValue="string" />
+
+        <br /><br />
+
+        <BitDropdown Label="Item icons (Icon - FontAwesome)"
+                     Items="GetExternalIconFaItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
+
+        <br /><br />
+
+        <BitDropdown Label="Item icons (Icon - Bootstrap Icons)"
+                     Items="GetExternalIconBiItems()"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Size" RazorCode="@example26RazorCode" CsharpCode="@example26CsharpCode" Id="example26" PreventRenderForMcpClient>
+    <div>
+        The <b>Size</b> parameter scales the whole component in one step, <b>Medium</b> being the default: the height
+        and the font size of the dropdown, of its search box and of the items in the callout all follow the chosen size.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="Small"
+                     ShowSearchBox
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Size="BitSize.Small"
+                     Placeholder="Select an item" />
+        <br /><br />
+        <BitDropdown Label="Medium"
+                     ShowSearchBox
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Size="BitSize.Medium"
+                     Placeholder="Select an item" />
+        <br /><br />
+        <BitDropdown Label="Large"
+                     ShowSearchBox
+                     Items="GetBasicItems()"
+                     DefaultValue="@string.Empty"
+                     Size="BitSize.Large"
+                     Placeholder="Select an item" />
+    </div>
+</DemoExample>
+
+<DemoExample Title="Style & Class" RazorCode="@example27RazorCode" CsharpCode="@example27CsharpCode" Id="example27" PreventRenderForMcpClient>
+    <div>
+        The dropdown can be styled at every level: <b>Style</b> and <b>Class</b> apply to the root element, each item
+        carries its own style and class, and the <b>Styles</b> and <b>Classes</b> parameters reach every internal part
+        of the component individually &mdash; the label, the container, the callout, the search box, the scroll
+        container, the items and everything else listed in the class-styles reference below. Because the callout is
+        rendered outside the root element, styling it through <b>Styles.Callout</b> or <b>Classes.Callout</b> is the way
+        to reach it rather than a descendant selector on the root.
+    </div>
     <br /><br />
     <div class="example-content">
         <div>Component's Style & Class:</div><br />
@@ -695,8 +1295,13 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
-    <div>Use BitDropdown in right-to-left (RTL).</div>
+<DemoExample Title="RTL" RazorCode="@example28RazorCode" CsharpCode="@example28CsharpCode" Id="example28" PreventRenderForMcpClient>
+    <div>
+        Setting the <b>Dir</b> parameter to <b>Rtl</b> renders the dropdown right-to-left for languages like Arabic,
+        Persian and Hebrew: the text, the label, the chevron, the check boxes and the search box all mirror, the
+        callout aligns to the right edge of the dropdown, and the responsive panel slides in from the left and is
+        swiped away in the opposite direction.
+    </div>
     <br />
     <dir dir="rtl" style="padding:0">
         <div class="example-content">
@@ -722,53 +1327,3 @@
         </div>
     </dir>
 </DemoExample>
-
-<DemoExample Title="Virtualization" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20" PreventRenderForMcpClient>
-    <div>Demonstrates virtualization in the BitDropdown component for handling large datasets efficiently.</div>
-    <br /><br /><br />
-    <div class="example-content">
-        <div>With <b>Items</b>:</div><br />
-        <BitDropdown Label="Single select"
-                     Virtualize
-                     Items="virtualizeItems1"
-                     DefaultValue="@string.Empty"
-                     Placeholder="Select an item" />
-        <br />
-        <BitDropdown Label="Multi select"
-                     Virtualize
-                     MultiSelect
-                     Items="virtualizeItems2"
-                     Placeholder="Select items"
-                     DefaultValue="@string.Empty" />
-        <br /><br /><br /><br />
-        <div>With <b>ItemsProvider</b>:</div><br />
-        <BitDropdown Label="Single select"
-                     Virtualize
-                     ItemsProvider="LoadItems"
-                     Placeholder="Select an item"
-                     TItem="BitDropdownItem<string>" TValue="string" />
-        <br />
-        <BitDropdown Label="Multi select"
-                     Virtualize
-                     MultiSelect
-                     ItemsProvider="LoadItems"
-                     Placeholder="Select items"
-                     TItem="BitDropdownItem<string>" TValue="string" />
-        <br /><br /><br /><br />
-        <div>With <b>ItemsProvider and InitialSelectedItems</b>:</div><br />
-        <BitDropdown Label="Single select"
-                     Virtualize
-                     ItemsProvider="LoadItems"
-                     Placeholder="Select an item"
-                     InitialSelectedItems="initialSelectedItem"
-                     TItem="BitDropdownItem<string>" TValue="string" />
-        <br />
-        <BitDropdown Label="Multi select"
-                     Virtualize
-                     MultiSelect
-                     ItemsProvider="LoadItems"
-                     Placeholder="Select items"
-                     InitialSelectedItems="initialSelectedItems"
-                     TItem="BitDropdownItem<string>" TValue="string" />
-    </div>
-</DemoExample>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs
index 6c4c49fafd..be2d1bd9b0 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.cs
@@ -123,6 +123,14 @@ private List<BitDropdownItem<string>> GetExternalIconBiItems() =>
     ];
 
 
+    private readonly List<BitDropdownItem<string>> emptyItems = [];
+
+    private IEnumerable<string?> selectAllValues = [];
+    private IEnumerable<string?> maxSelectedValues = [];
+
+    private bool isDropdownOpen;
+    private int selectItemCounter;
+
     private string controlledValue = "f-app";
     private IEnumerable<string> controlledValues = ["f-app", "f-ban"];
 
@@ -134,6 +142,12 @@ private List<BitDropdownItem<string>> GetExternalIconBiItems() =>
 
     private string? clearValue = "f-app";
     private IEnumerable<string?> clearValues = ["f-app", "f-ban"];
+    private int clearCounter;
+
+    private string calloutState = "closed";
+
+    private bool isLoadingItems;
+    private ICollection<BitDropdownItem<string>> delayedItems = [];
 
     private string? immediateSearchValue;
     private string? debouncedSearchValue;
@@ -231,6 +245,21 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
         comboBoxItems.Add(item);
     }
 
+    private void HandleOnCalloutOpen() => calloutState = "opened";
+
+    private void HandleOnCalloutClose() => calloutState = "closed";
+
+    private async Task LoadDelayedItems()
+    {
+        isLoadingItems = true;
+        delayedItems = [];
+
+        await Task.Delay(2000);
+
+        delayedItems = GetBasicItems();
+        isLoadingItems = false;
+    }
+
     private async ValueTask<BitDropdownItemsProviderResult<BitDropdownItem<string>>> LoadItems(
         BitDropdownItemsProviderRequest<BitDropdownItem<string>> request)
     {
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
index 9c0ca57b90..9ac8b59f64 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownItemDemo.razor.samples.cs
@@ -29,7 +29,26 @@ public partial class _BitDropdownItemDemo
              IsEnabled=""false""
              Items=""GetBasicItems()""
              DefaultValue=""@(""f-ora"")""
-             Placeholder=""Select an item"" />";
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""ReadOnly""
+             ReadOnly
+             Items=""GetBasicItems()""
+             DefaultValue=""@(""f-app"")""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Custom delimiter""
+             MultiSelect
+             MultiSelectDelimiter="" - ""
+             Items=""GetBasicItems()""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"" })""
+             Placeholder=""Select items"" />
+
+<BitDropdown Label=""Title""
+             Title=""Pick your favorite fruit or vegetable""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Hover me"" />";
     private readonly string example1CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
@@ -68,6 +87,19 @@ public partial class _BitDropdownItemDemo
              TItem=""BitDropdownItem<string>""
              TValue=""string"" />
 
+<BitDropdown Label=""Templates""
+             Items=""GetBasicItems()""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownItem<string>""
+             TValue=""string"">
+    <PrefixTemplate>
+        <BitIcon IconName=""@BitIconName.ShoppingCart"" Style=""padding-inline:0.5rem"" />
+    </PrefixTemplate>
+    <SuffixTemplate>
+        <BitIcon IconName=""@BitIconName.Info"" Style=""padding-inline:0.5rem"" />
+    </SuffixTemplate>
+</BitDropdown>
+
 <BitDropdown Label=""Disabled""
              Prefix=""Fruits:""
              Suffix=""kg""
@@ -129,7 +161,14 @@ public partial class _BitDropdownItemDemo
              MultiSelect
              Items=""GetBasicItems()""
              Placeholder=""Select items""
-             DefaultValue=""@string.Empty"" />";
+             DefaultValue=""@string.Empty"" />
+
+<div style=""padding:0.5rem;border-radius:0.5rem;background:linear-gradient(90deg,#ff00cc7f,#3333997f)"">
+    <BitDropdown Transparent
+                 Items=""GetBasicItems()""
+                 DefaultValue=""@string.Empty""
+                 Placeholder=""Select an item"" />
+</div>";
     private readonly string example4CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
@@ -202,8 +241,17 @@ protected override void OnInitialized()
              Items=""GetBasicItems()""
              Placeholder=""Select options""
              Label=""Multi select dropdown"" />
-<div>Values: @string.Join(',', clearValues)</div>";
+<div>Values: @string.Join(',', clearValues)</div>
+
+<BitDropdown ShowClearButton
+             Items=""GetBasicItems()""
+             Label=""Single select dropdown""
+             DefaultValue=""@(""f-app"")""
+             Placeholder=""Select an option""
+             OnClear=""() => clearCounter++"" />
+<div>OnClear count: @clearCounter</div>";
     private readonly string example7CsharpCode = @"
+private int clearCounter;
 private string? clearValue = ""f-app"";
 private ICollection<string?> clearValues = new[] { ""f-app"", ""f-ban"" };
 
@@ -276,6 +324,69 @@ protected override void OnInitialized()
 };";
 
     private readonly string example9RazorCode = @"
+<BitDropdown Label=""SearchMode: StartsWith""
+             ShowSearchBox
+             AutoFocusSearchBox
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Type a first letter""
+             SearchMode=""BitDropdownSearchMode.StartsWith"" />
+
+<BitDropdown Label=""MinSearchLength: 3""
+             ShowSearchBox
+             AutoFocusSearchBox
+             MinSearchLength=""3""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Type at least 3 characters"" />
+
+<BitDropdown Label=""HighlightSearch""
+             ShowSearchBox
+             AutoFocusSearchBox
+             HighlightSearch
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search item"" />
+
+<BitDropdown Label=""Highlight in the ComboBox""
+             Combo
+             HighlightSearch
+             Items=""comboBoxItems""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Type to filter"" />";
+    private readonly string example9CsharpCode = @"
+private List<BitDropdownItem<string>> comboBoxItems = new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private List<BitDropdownItem<string>> GetBasicItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
+
+    private readonly string example10RazorCode = @"
 <BitDropdown Label=""Immediate""
              ShowSearchBox
              Immediate
@@ -304,7 +415,7 @@ protected override void OnInitialized()
              Items=""comboBoxItems""
              DefaultValue=""@string.Empty""
              Placeholder=""Select an item"" />";
-    private readonly string example9CsharpCode = @"
+    private readonly string example10CsharpCode = @"
 private string? immediateSearchValue;
 private string? debouncedSearchValue;
 
@@ -336,7 +447,7 @@ protected override void OnInitialized()
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example11RazorCode = @"
 @using System.ComponentModel.DataAnnotations;
 
 <style>
@@ -364,7 +475,7 @@ protected override void OnInitialized()
 
     <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
 </EditForm>";
-    private readonly string example10CsharpCode = @"
+    private readonly string example11CsharpCode = @"
 public class FormValidationDropdownModel
 {
     [MaxLength(2, ErrorMessage = ""The property {0} have more than {1} elements"")]
@@ -395,7 +506,7 @@ private void HandleInvalidSubmit() { }
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example11RazorCode = @"
+    private readonly string example12RazorCode = @"
 <style>
     .custom-drp {
         gap: 10px;
@@ -490,6 +601,15 @@ private void HandleInvalidSubmit() { }
              Placeholder=""Select an item""
              CaretDownIconName=""@BitIconName.ScrollUpDown"" />
 
+<BitDropdown Label=""CaretDownTemplate""
+             Items=""GetDataItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"">
+    <CaretDownTemplate>
+        <BitIcon IconName=""@BitIconName.FavoriteStar"" Style=""font-size:0.875rem"" />
+    </CaretDownTemplate>
+</BitDropdown>
+
 <BitDropdown Label=""Callout templates""
              Items=""GetBasicItems()""
              DefaultValue=""@string.Empty""
@@ -501,7 +621,7 @@ private void HandleInvalidSubmit() { }
         <BitActionButton IconName=""@BitIconName.Add"">New Item</BitActionButton>
     </CalloutFooterTemplate>
 </BitDropdown>";
-    private readonly string example11CsharpCode = @"
+    private readonly string example12CsharpCode = @"
 public class DropdownItemData
 {
     public string? IconName { get; set; }
@@ -520,7 +640,7 @@ public class DropdownItemData
     new() { Text = ""Item f"", Value = ""F"", Data = new DropdownItemData { IconName = ""Running"" } }
 };";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example13RazorCode = @"
 <BitDropdown @bind-Value=""controlledValue""
              Label=""Single select""
              Items=""GetBasicItems()""
@@ -566,8 +686,39 @@ public class DropdownItemData
              Placeholder=""Select items""
              DefaultValue=""@string.Empty""
              OnSelectItem=""(BitDropdownItem<string> item) => selectedItem2 = item"" />
-<div>Selected Value: @selectedItem2?.Value</div>";
-    private readonly string example12CsharpCode = @"
+<div>Selected Value: @selectedItem2?.Value</div>
+
+<BitDropdown Label=""Single select""
+             Reselectable
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             OnSelectItem=""(BitDropdownItem<string> item) => selectItemCounter++"" />
+<div>OnSelectItem count: @selectItemCounter</div>
+
+<BitButton OnClick=""() => isDropdownOpen = true"">Open the dropdown</BitButton>
+<BitDropdown @bind-IsOpen=""isDropdownOpen""
+             Label=""Single select""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Single select""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             OnOpen=""HandleOnCalloutOpen""
+             OnClose=""HandleOnCalloutClose"" />
+<div>The callout is @calloutState.</div>";
+    private readonly string example13CsharpCode = @"
+private bool isDropdownOpen;
+private int selectItemCounter;
+private string calloutState = ""closed"";
+
+private void HandleOnCalloutOpen() => calloutState = ""opened"";
+
+private void HandleOnCalloutClose() => calloutState = ""closed"";
+
 private string controlledValue = ""f-app"";
 private IEnumerable<string> controlledValues = [""f-app"", ""f-ban""];
 
@@ -591,83 +742,539 @@ public class DropdownItemData
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example20RazorCode = @"
-<BitDropdown Label=""Single select""
-             Virtualize
-             Items=""virtualizeItems1""
-             DefaultValue=""@string.Empty""
-             Placeholder=""Select an item"" />
+    private readonly string example14RazorCode = @"
+<BitDropdown @bind-Value=""comboBoxValueSample1""
+             Combo
+             Responsive
+             Items=""comboBoxItems"" 
+             Placeholder=""Select an option""
+             Label=""Single select combo box"" />
+<div>Value: @comboBoxValueSample1</div>
 
-<BitDropdown Label=""Multi select""
-             Virtualize
+<BitDropdown @bind-Values=""comboBoxValues1""
+             Combo 
+             Responsive
              MultiSelect
-             Items=""virtualizeItems2""
-             Placeholder=""Select items""
-             DefaultValue=""@string.Empty"" />
+             Items=""comboBoxItems"" 
+             Label=""Multi select combo box""
+             Placeholder=""Select an option"" />
+<div>Values: @string.Join(',', comboBoxValues1)</div>";
+    private readonly string example14CsharpCode = @"
+private string comboBoxValueSample1 = default!;
+private ICollection<string?> comboBoxValues1 = [];
 
+private List<BitDropdownItem<string>> comboBoxItems = new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
 
-<BitDropdown Label=""Single select""
-             Virtualize
-             ItemsProvider=""LoadItems""
-             Placeholder=""Select an item""
-             TItem=""BitDropdownItem<string>"" TValue=""string"" />
+    private readonly string example15RazorCode = @"
+<BitDropdown @bind-Value=""comboBoxValueSample2""
+             Combo Chips
+             Responsive
+             Items=""comboBoxItems"" 
+             Placeholder=""Select an option""
+             Label=""Single select combo box & chips"" />
+<div>Value: @comboBoxValueSample2</div>
 
-<BitDropdown Label=""Multi select""
-             Virtualize
+<BitDropdown @bind-Values=""comboBoxValues2""
+             Combo Chips 
              MultiSelect
-             ItemsProvider=""LoadItems""
+             Responsive
+             Items=""comboBoxItems"" 
+             Placeholder=""Select an option""
+             Label=""Multi select combo box & chips"" />
+<div>Values: @string.Join(',', comboBoxValues2)</div>";
+    private readonly string example15CsharpCode = @"
+private string comboBoxValueSample2 = default!;
+private ICollection<string?> comboBoxValues2 = [];
+
+private List<BitDropdownItem<string>> comboBoxItems = new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
+
+    private readonly string example16RazorCode = @"
+<BitDropdown Label=""MaxDisplayedItems (chips)""
+             Chips
+             MultiSelect
+             MaxDisplayedItems=""2""
+             Items=""GetBasicItems()""
              Placeholder=""Select items""
-             TItem=""BitDropdownItem<string>"" TValue=""string"" />
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"", ""f-gra"", ""v-car"" })"" />
 
-<BitDropdown Label=""Single select""
-             Virtualize
-             ItemsProvider=""LoadItems""
-             Placeholder=""Select an item""
-             InitialSelectedItems=""initialSelectedItem""
-             TItem=""BitDropdownItem<string>"" TValue=""string"" />
+<BitDropdown Label=""OverflowTextFormat""
+             Chips
+             MultiSelect
+             MaxDisplayedItems=""2""
+             OverflowTextFormat=""and {0} more""
+             Items=""GetBasicItems()""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"", ""f-gra"", ""v-car"" })"" />
 
-<BitDropdown Label=""Multi select""
-             Virtualize
+<BitDropdown Label=""SelectedItemsTextFormat""
              MultiSelect
-             ItemsProvider=""LoadItems""
+             MaxDisplayedItems=""2""
+             SelectedItemsTextFormat=""{0} fruits and vegetables""
+             Items=""GetBasicItems()""
              Placeholder=""Select items""
-             InitialSelectedItems=""initialSelectedItems""
-             TItem=""BitDropdownItem<string>"" TValue=""string"" />";
-    private readonly string example20CsharpCode = @"
-private ICollection<BitDropdownItem<string>>? virtualizeItems1;
-private ICollection<BitDropdownItem<string>>? virtualizeItems2;
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"", ""f-gra"", ""v-car"" })"" />
 
-private IEnumerable<BitDropdownItem<string>> initialSelectedItem = [
-    new()
-    {
-        Text = ""Product 100"",
-        Value = ""100"",
-        Data = new ProductDto {
-            Id = 100,
-            Price = 60,
-            Name = ""Product 100""
-        },
-        AriaLabel = ""Product 100"",
-        IsEnabled = true,
-        ItemType = BitDropdownItemType.Normal
-    }
-];
+<BitDropdown Label=""AutoClearSearch""
+             Combo Chips
+             MultiSelect
+             AutoClearSearch
+             Items=""comboBoxItems""
+             DefaultValues=""@(Array.Empty<string>())""
+             Placeholder=""Type to filter, then pick"" />
 
-private IEnumerable<BitDropdownItem<string>> initialSelectedItems = [
-    new()
-    {
-        Text = ""Product 100"",
-        Value = ""100"",
-        Data = new ProductDto {
-            Id = 100,
-            Price = 60,
-            Name = ""Product 100""
-        },
-        AriaLabel = ""Product 100"",
-        IsEnabled = true,
-        ItemType = BitDropdownItemType.Normal
-    },
-    new()
+<BitDropdown Label=""HideSelectedItems""
+             Chips
+             MultiSelect
+             HideSelectedItems
+             Items=""GetBasicItems()""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"" })"" />";
+    private readonly string example16CsharpCode = @"
+private List<BitDropdownItem<string>> GetBasicItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};
+
+private List<BitDropdownItem<string>> comboBoxItems = new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
+
+    private readonly string example17RazorCode = @"
+<BitDropdown @bind-Value=""comboBoxValueSample3""
+             Combo Dynamic
+             Responsive
+             Items=""comboBoxItems""
+             Placeholder=""Select an option""
+             Label=""Single select combo box & dynamic""
+             DynamicValueGenerator=""(BitDropdownItem<string> item) => item.Text""
+             OnDynamicAdd=""(BitDropdownItem<string> item) => HandleOnDynamicAdd(item)"" />
+<div>Value: @comboBoxValueSample3</div>
+
+<BitDropdown @bind-Value=""comboBoxValueSample4""
+             Responsive
+             Combo Chips Dynamic
+             Items=""comboBoxItems""
+             Placeholder=""Select an option""
+             Label=""Single select combo box, chips & dynamic""
+             DynamicValueGenerator=""(BitDropdownItem<string> item) => item.Text""
+             OnDynamicAdd=""(BitDropdownItem<string> item) => HandleOnDynamicAdd(item)"" />
+<div>Value: @comboBoxValueSample4</div>
+
+<BitDropdown @bind-Values=""comboBoxValues3""
+             Responsive
+             MultiSelect
+             Combo Chips Dynamic
+             Items=""comboBoxItems""
+             Placeholder=""Select options""
+             Label=""Multi select combo box, chips & dynamic""
+             DynamicValueGenerator=""(BitDropdownItem<string> item) => item.Text""
+             OnDynamicAdd=""(BitDropdownItem<string> item) => HandleOnDynamicAdd(item)"" />
+<div>Values: @string.Join(',', comboBoxValues3)</div>";
+    private readonly string example17CsharpCode = @"
+private string comboBoxValueSample3 = default!;
+private string comboBoxValueSample4 = default!;
+private ICollection<string?> comboBoxValues3 = [];
+
+private void HandleOnDynamicAdd(BitDropdownItem<string> item)
+{
+    comboBoxItems.Add(item);
+}
+
+private List<BitDropdownItem<string>> comboBoxItems = new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
+
+    private readonly string example18RazorCode = @"
+<BitDropdown Label=""Single select""
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Multi select""
+             MultiSelect
+             Items=""GetBasicItems()""
+             Placeholder=""Select items""
+             DefaultValue=""@string.Empty"" />";
+    private readonly string example18CsharpCode = @"
+private List<BitDropdownItem<string>> GetBasicItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
+
+    private readonly string example19RazorCode = @"
+<BitDropdown @bind-Values=""selectAllValues""
+             MultiSelect
+             ShowSelectAll
+             Items=""GetBasicItems()""
+             Placeholder=""Select items""
+             Label=""Select all"" />
+<div>Values: @string.Join(',', selectAllValues)</div>
+
+<BitDropdown MultiSelect
+             ShowSelectAll
+             ShowSearchBox
+             SelectAllText=""Select all of them""
+             Items=""GetBasicItems()""
+             Placeholder=""Select items""
+             DefaultValue=""@string.Empty""
+             SearchBoxPlaceholder=""Search items""
+             Label=""Custom text & search"" />";
+    private readonly string example19CsharpCode = @"
+private IEnumerable<string?> selectAllValues = [];
+
+private List<BitDropdownItem<string>> GetBasicItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
+
+    private readonly string example20RazorCode = @"
+<BitDropdown @bind-Values=""maxSelectedValues""
+             MultiSelect
+             MaxSelectedItems=""2""
+             Items=""GetBasicItems()""
+             Placeholder=""Select up to 2 items""
+             Label=""Max 2 items"" />
+<div>Values: @string.Join(',', maxSelectedValues)</div>";
+    private readonly string example20CsharpCode = @"
+private IEnumerable<string?> maxSelectedValues = [];
+
+private List<BitDropdownItem<string>> GetBasicItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
+
+    private readonly string example21RazorCode = @"
+<style>
+    .custom-drp {
+        gap: 10px;
+        display: flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+    }
+
+    .custom-drp.custom-drp-empty {
+        color: orangered;
+        padding: 5px 12px;
+        justify-content: center;
+    }
+</style>
+
+<BitDropdown Label=""Default""
+             Items=""emptyItems""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownItem<string>"" TValue=""string"" />
+
+<BitDropdown Label=""EmptyText""
+             Items=""emptyItems""
+             Placeholder=""Select an item""
+             EmptyText=""There is nothing here!""
+             TItem=""BitDropdownItem<string>"" TValue=""string"" />
+
+<BitDropdown Label=""EmptyTemplate""
+             Items=""emptyItems""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownItem<string>"" TValue=""string"">
+    <EmptyTemplate>
+        <div class=""custom-drp custom-drp-empty"">
+            <BitIcon IconName=""@BitIconName.SearchIssue"" />
+            <div>Nothing to show!</div>
+        </div>
+    </EmptyTemplate>
+</BitDropdown>
+
+<BitDropdown Label=""Search without result""
+             ShowSearchBox
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search for anything"" />
+
+<BitDropdown Label=""NoResultsText""
+             ShowSearchBox
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search for anything""
+             NoResultsText=""Nothing matched your search"" />
+
+<BitDropdown Label=""NoResultsTemplate""
+             ShowSearchBox
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search for anything"">
+    <NoResultsTemplate>
+        <div class=""custom-drp custom-drp-empty"">
+            <BitIcon IconName=""@BitIconName.SearchAndApps"" />
+            <div>No match. Try another term!</div>
+        </div>
+    </NoResultsTemplate>
+</BitDropdown>";
+    private readonly string example21CsharpCode = @"
+private readonly List<BitDropdownItem<string>> emptyItems = [];
+
+private List<BitDropdownItem<string>> GetBasicItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
+
+    private readonly string example22RazorCode = @"
+<style>
+    .custom-drp {
+        gap: 10px;
+        display: flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+    }
+
+    .custom-drp.custom-drp-empty {
+        color: orangered;
+        padding: 5px 12px;
+        justify-content: center;
+    }
+</style>
+
+<BitDropdown Label=""IsLoading""
+             IsLoading
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""LoadingText""
+             IsLoading
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             LoadingText=""Fetching the products..."" />
+
+<BitDropdown Label=""LoadingTemplate""
+             IsLoading
+             Items=""GetBasicItems()""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"">
+    <LoadingTemplate>
+        <div class=""custom-drp custom-drp-empty"">
+            <BitIcon IconName=""@BitIconName.Sync"" />
+            <div>Just a moment...</div>
+        </div>
+    </LoadingTemplate>
+</BitDropdown>
+
+<BitButton OnClick=""LoadDelayedItems"" IsLoading=""isLoadingItems"">Load the items</BitButton>
+<BitDropdown Label=""Products""
+             IsLoading=""isLoadingItems""
+             Items=""delayedItems""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"" />";
+    private readonly string example22CsharpCode = @"
+private bool isLoadingItems;
+private ICollection<BitDropdownItem<string>> delayedItems = [];
+
+private async Task LoadDelayedItems()
+{
+    isLoadingItems = true;
+    delayedItems = [];
+
+    await Task.Delay(2000);
+
+    delayedItems = GetBasicItems();
+    isLoadingItems = false;
+}
+
+private List<BitDropdownItem<string>> GetBasicItems() => new()
+{
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+};";
+
+    private readonly string example23RazorCode = @"
+<BitDropdown Label=""Single select""
+             Virtualize
+             Items=""virtualizeItems1""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item"" />
+
+<BitDropdown Label=""Multi select""
+             Virtualize
+             MultiSelect
+             ItemSize=""35""
+             OverscanCount=""5""
+             Items=""virtualizeItems2""
+             Placeholder=""Select items""
+             DefaultValue=""@string.Empty"" />
+
+
+<BitDropdown Label=""Single select""
+             Virtualize
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownItem<string>"" TValue=""string"" />
+
+<BitDropdown Label=""Multi select""
+             Virtualize
+             MultiSelect
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select items""
+             TItem=""BitDropdownItem<string>"" TValue=""string"" />
+
+<BitDropdown Label=""VirtualizePlaceholder""
+             Virtualize
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownItem<string>"" TValue=""string"">
+    <VirtualizePlaceholder>
+        <div style=""padding:0 0.5rem;color:gray"">Loading @(context.Index)...</div>
+    </VirtualizePlaceholder>
+</BitDropdown>
+
+<BitDropdown Label=""Single select""
+             Virtualize
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select an item""
+             InitialSelectedItems=""initialSelectedItem""
+             TItem=""BitDropdownItem<string>"" TValue=""string"" />
+
+<BitDropdown Label=""Multi select""
+             Virtualize
+             MultiSelect
+             ItemsProvider=""LoadItems""
+             Placeholder=""Select items""
+             InitialSelectedItems=""initialSelectedItems""
+             TItem=""BitDropdownItem<string>"" TValue=""string"" />";
+    private readonly string example23CsharpCode = @"
+private ICollection<BitDropdownItem<string>>? virtualizeItems1;
+private ICollection<BitDropdownItem<string>>? virtualizeItems2;
+
+private IEnumerable<BitDropdownItem<string>> initialSelectedItem = [
+    new()
+    {
+        Text = ""Product 100"",
+        Value = ""100"",
+        Data = new ProductDto {
+            Id = 100,
+            Price = 60,
+            Name = ""Product 100""
+        },
+        AriaLabel = ""Product 100"",
+        IsEnabled = true,
+        ItemType = BitDropdownItemType.Normal
+    }
+];
+
+private IEnumerable<BitDropdownItem<string>> initialSelectedItems = [
+    new()
+    {
+        Text = ""Product 100"",
+        Value = ""100"",
+        Data = new ProductDto {
+            Id = 100,
+            Price = 60,
+            Name = ""Product 100""
+        },
+        AriaLabel = ""Product 100"",
+        IsEnabled = true,
+        ItemType = BitDropdownItemType.Normal
+    },
+    new()
     {
         Text = ""Product 99"",
         Value = ""99"",
@@ -733,118 +1340,72 @@ private async ValueTask<BitDropdownItemsProviderResult<BitDropdownItem<string>>>
     }
 }";
 
-    private readonly string example13RazorCode = @"
-<BitDropdown @bind-Value=""comboBoxValueSample1""
-             Combo
-             Responsive
-             Items=""comboBoxItems"" 
-             Placeholder=""Select an option""
-             Label=""Single select combo box"" />
-<div>Value: @comboBoxValueSample1</div>
-
-<BitDropdown @bind-Values=""comboBoxValues1""
-             Combo 
-             Responsive
+    private readonly string example24RazorCode = @"
+<BitDropdown Label=""Primary""
              MultiSelect
-             Items=""comboBoxItems"" 
-             Label=""Multi select combo box""
-             Placeholder=""Select an option"" />
-<div>Values: @string.Join(',', comboBoxValues1)</div>";
-    private readonly string example13CsharpCode = @"
-private string comboBoxValueSample1 = default!;
-private ICollection<string?> comboBoxValues1 = [];
-
-private List<BitDropdownItem<string>> comboBoxItems = new()
-{
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
-    new() { Text = ""Apple"", Value = ""f-app"" },
-    new() { Text = ""Banana"", Value = ""f-ban"" },
-    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
-    new() { Text = ""Grape"", Value = ""f-gra"" },
-    new() { ItemType = BitDropdownItemType.Divider },
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
-    new() { Text = ""Broccoli"", Value = ""v-bro"" },
-    new() { Text = ""Carrot"", Value = ""v-car"" },
-    new() { Text = ""Lettuce"", Value = ""v-let"" }
-};";
-
-    private readonly string example14RazorCode = @"
-<BitDropdown @bind-Value=""comboBoxValueSample2""
-             Combo Chips
-             Responsive
-             Items=""comboBoxItems"" 
-             Placeholder=""Select an option""
-             Label=""Single select combo box & chips"" />
-<div>Value: @comboBoxValueSample2</div>
+             ShowSearchBox
+             DefaultValue=""@("""")""
+             Items=""GetBasicItems()""
+             Color=""BitColor.Primary""
+             Placeholder=""Select items"" />
 
-<BitDropdown @bind-Values=""comboBoxValues2""
-             Combo Chips 
+<BitDropdown Label=""Secondary""
              MultiSelect
-             Responsive
-             Items=""comboBoxItems"" 
-             Placeholder=""Select an option""
-             Label=""Multi select combo box & chips"" />
-<div>Values: @string.Join(',', comboBoxValues2)</div>";
-    private readonly string example14CsharpCode = @"
-private string comboBoxValueSample2 = default!;
-private ICollection<string?> comboBoxValues2 = [];
+             ShowSearchBox
+             DefaultValue=""@("""")""
+             Items=""GetBasicItems()""
+             Color=""BitColor.Secondary""
+             Placeholder=""Select items"" />
 
-private List<BitDropdownItem<string>> comboBoxItems = new()
-{
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
-    new() { Text = ""Apple"", Value = ""f-app"" },
-    new() { Text = ""Banana"", Value = ""f-ban"" },
-    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
-    new() { Text = ""Grape"", Value = ""f-gra"" },
-    new() { ItemType = BitDropdownItemType.Divider },
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
-    new() { Text = ""Broccoli"", Value = ""v-bro"" },
-    new() { Text = ""Carrot"", Value = ""v-car"" },
-    new() { Text = ""Lettuce"", Value = ""v-let"" }
-};";
+<BitDropdown Label=""Tertiary""
+             MultiSelect
+             ShowSearchBox
+             DefaultValue=""@("""")""
+             Items=""GetBasicItems()""
+             Color=""BitColor.Tertiary""
+             Placeholder=""Select items"" />
 
-    private readonly string example15RazorCode = @"
-<BitDropdown @bind-Value=""comboBoxValueSample3""
-             Combo Dynamic
-             Responsive
-             Items=""comboBoxItems""
-             Placeholder=""Select an option""
-             Label=""Single select combo box & dynamic""
-             DynamicValueGenerator=""(BitDropdownItem<string> item) => item.Text""
-             OnDynamicAdd=""(BitDropdownItem<string> item) => HandleOnDynamicAdd(item)"" />
-<div>Value: @comboBoxValueSample3</div>
+<BitDropdown Label=""Info""
+             MultiSelect
+             ShowSearchBox
+             DefaultValue=""@("""")""
+             Items=""GetBasicItems()""
+             Color=""BitColor.Info""
+             Placeholder=""Select items"" />
 
-<BitDropdown @bind-Value=""comboBoxValueSample4""
-             Responsive
-             Combo Chips Dynamic
-             Items=""comboBoxItems""
-             Placeholder=""Select an option""
-             Label=""Single select combo box, chips & dynamic""
-             DynamicValueGenerator=""(BitDropdownItem<string> item) => item.Text""
-             OnDynamicAdd=""(BitDropdownItem<string> item) => HandleOnDynamicAdd(item)"" />
-<div>Value: @comboBoxValueSample4</div>
+<BitDropdown Label=""Success""
+             MultiSelect
+             ShowSearchBox
+             DefaultValue=""@("""")""
+             Items=""GetBasicItems()""
+             Color=""BitColor.Success""
+             Placeholder=""Select items"" />
 
-<BitDropdown @bind-Values=""comboBoxValues3""
-             Responsive
+<BitDropdown Label=""Warning""
              MultiSelect
-             Combo Chips Dynamic
-             Items=""comboBoxItems""
-             Placeholder=""Select options""
-             Label=""Multi select combo box, chips & dynamic""
-             DynamicValueGenerator=""(BitDropdownItem<string> item) => item.Text""
-             OnDynamicAdd=""(BitDropdownItem<string> item) => HandleOnDynamicAdd(item)"" />
-<div>Values: @string.Join(',', comboBoxValues3)</div>";
-    private readonly string example15CsharpCode = @"
-private string comboBoxValueSample3 = default!;
-private string comboBoxValueSample4 = default!;
-private ICollection<string?> comboBoxValues3 = [];
+             ShowSearchBox
+             DefaultValue=""@("""")""
+             Items=""GetBasicItems()""
+             Color=""BitColor.Warning""
+             Placeholder=""Select items"" />
 
-private void HandleOnDynamicAdd(BitDropdownItem<string> item)
-{
-    comboBoxItems.Add(item);
-}
+<BitDropdown Label=""SevereWarning""
+             MultiSelect
+             ShowSearchBox
+             DefaultValue=""@("""")""
+             Items=""GetBasicItems()""
+             Color=""BitColor.SevereWarning""
+             Placeholder=""Select items"" />
 
-private List<BitDropdownItem<string>> comboBoxItems = new()
+<BitDropdown Label=""Error""
+             MultiSelect
+             ShowSearchBox
+             DefaultValue=""@("""")""
+             Items=""GetBasicItems()""
+             Color=""BitColor.Error""
+             Placeholder=""Select items"" />";
+    private readonly string example24CsharpCode = @"
+private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
     new() { Text = ""Apple"", Value = ""f-app"" },
@@ -858,7 +1419,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example16RazorCode = @"
+    private readonly string example25RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 <link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
 
@@ -891,6 +1452,13 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
              DefaultValue=""@string.Empty""
              Placeholder=""Select an item"" />
 
+<BitDropdown Label=""Item check icon (external)""
+             MultiSelect
+             ItemCheckIcon=""@BitIconInfo.Css(""fa-solid fa-heart"")""
+             Items=""GetBasicItems()""
+             DefaultValues=""@(Array.Empty<string>())""
+             Placeholder=""Select items"" />
+
 <BitDropdown Label=""Item icons (IconName - Fluent UI)""
              Items=""GetExternalIconItems()""
              DefaultValue=""@string.Empty""
@@ -905,7 +1473,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
              Items=""GetExternalIconBiItems()""
              DefaultValue=""@string.Empty""
              Placeholder=""Select an item"" />";
-    private readonly string example16CsharpCode = @"
+    private readonly string example25CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -962,71 +1530,28 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"", Icon = BitIconInfo.Bi(""flower2"") }
 };";
 
-    private readonly string example17RazorCode = @"
-<BitDropdown Label=""Primary""
-             MultiSelect
-             ShowSearchBox
-             DefaultValue=""@("""")""
-             Items=""GetBasicItems()""
-             Color=""BitColor.Primary""
-             Placeholder=""Select items"" />
-
-<BitDropdown Label=""Secondary""
-             MultiSelect
-             ShowSearchBox
-             DefaultValue=""@("""")""
-             Items=""GetBasicItems()""
-             Color=""BitColor.Secondary""
-             Placeholder=""Select items"" />
-
-<BitDropdown Label=""Tertiary""
-             MultiSelect
-             ShowSearchBox
-             DefaultValue=""@("""")""
-             Items=""GetBasicItems()""
-             Color=""BitColor.Tertiary""
-             Placeholder=""Select items"" />
-
-<BitDropdown Label=""Info""
-             MultiSelect
-             ShowSearchBox
-             DefaultValue=""@("""")""
-             Items=""GetBasicItems()""
-             Color=""BitColor.Info""
-             Placeholder=""Select items"" />
-
-<BitDropdown Label=""Success""
-             MultiSelect
-             ShowSearchBox
-             DefaultValue=""@("""")""
-             Items=""GetBasicItems()""
-             Color=""BitColor.Success""
-             Placeholder=""Select items"" />
-
-<BitDropdown Label=""Warning""
-             MultiSelect
+    private readonly string example26RazorCode = @"
+<BitDropdown Label=""Small""
              ShowSearchBox
-             DefaultValue=""@("""")""
              Items=""GetBasicItems()""
-             Color=""BitColor.Warning""
-             Placeholder=""Select items"" />
+             DefaultValue=""@string.Empty""
+             Size=""BitSize.Small""
+             Placeholder=""Select an item"" />
 
-<BitDropdown Label=""SevereWarning""
-             MultiSelect
+<BitDropdown Label=""Medium""
              ShowSearchBox
-             DefaultValue=""@("""")""
              Items=""GetBasicItems()""
-             Color=""BitColor.SevereWarning""
-             Placeholder=""Select items"" />
+             DefaultValue=""@string.Empty""
+             Size=""BitSize.Medium""
+             Placeholder=""Select an item"" />
 
-<BitDropdown Label=""Error""
-             MultiSelect
+<BitDropdown Label=""Large""
              ShowSearchBox
-             DefaultValue=""@("""")""
              Items=""GetBasicItems()""
-             Color=""BitColor.Error""
-             Placeholder=""Select items"" />";
-    private readonly string example17CsharpCode = @"
+             DefaultValue=""@string.Empty""
+             Size=""BitSize.Large""
+             Placeholder=""Select an item"" />";
+    private readonly string example26CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1041,7 +1566,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 };";
 
-    private readonly string example18RazorCode = @"
+    private readonly string example27RazorCode = @"
 <style>
     .custom-class {
         margin-inline: 1rem;
@@ -1119,7 +1644,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
                                 Container = ""custom-container"",
                                 ItemButton = ""custom-item-button"",
                                 ScrollContainer = ""custom-scroll-container"" })"" />";
-    private readonly string example18CsharpCode = @"
+    private readonly string example27CsharpCode = @"
 private List<BitDropdownItem<string>> GetBasicItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1148,7 +1673,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"", Class = ""custom-veg"" }
 };";
 
-    private readonly string example19RazorCode = @"
+    private readonly string example28RazorCode = @"
 <BitDropdown Label=""تک انتخابی""
              Items=""GetRtlItems()""
              DefaultValue=""@string.Empty""
@@ -1168,7 +1693,7 @@ private void HandleOnDynamicAdd(BitDropdownItem<string> item)
              Items=""GetRtlItems()""
              DefaultValue=""@string.Empty""
              Placeholder=""لطفا انتخاب کنید"" />";
-    private readonly string example19CsharpCode = @"
+    private readonly string example28CsharpCode = @"
 private List<BitDropdownItem<string>> GetRtlItems() => new()
 {
     new() { ItemType = BitDropdownItemType.Header, Text = ""میوه ها"" },
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
index fc5fa9b26b..939b906d6c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor
@@ -1,5 +1,13 @@
 <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
-    <div>Displays basic dropdowns demonstrating single and multi-select options, including required and disabled states.</div>
+    <div>
+        BitDropdown in its simplest forms: single and multi select dropdowns, a required one (which marks its label and
+        reports itself as required to assistive technologies), one preserving its original callout width instead of
+        matching the width of the dropdown, and a custom delimiter for joining the selected values in multi select mode.
+        A <b>disabled</b> dropdown cannot be focused or opened at all, while a <b>read-only</b> one stays focusable and
+        its callout can still be browsed &mdash; only changing the selection is blocked, and every control that would
+        change it (the clear button, the chip remove buttons) is hidden accordingly.
+        The <b>Title</b> parameter adds the tooltip shown while the pointer rests on the dropdown.
+    </div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Single select"
@@ -56,11 +64,50 @@
                 <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
             }
         </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="ReadOnly"
+                     ReadOnly
+                     DefaultValue="@("f-app")"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="Custom delimiter"
+                     MultiSelect
+                     MultiSelectDelimiter=" - "
+                     DefaultValues="@(new[] { "f-app", "f-ban" })"
+                     Placeholder="Select items"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="Title"
+                     Title="Pick your favorite fruit or vegetable"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Hover me"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
     </div>
 </DemoExample>
 
 <DemoExample Title="Prefix & Suffix" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2" PreventRenderForMcpClient>
-    <div>Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.</div>
+    <div>
+        The <b>Prefix</b> and <b>Suffix</b> parameters put fixed text before and after the selected value &mdash; a
+        unit, a currency, a category &mdash; and <b>PrefixTemplate</b> and <b>SuffixTemplate</b> replace them with any
+        content, an icon for instance. They are decoration only: they are not part of the value and are not read out
+        with it, so keep a descriptive <b>Label</b> for screen reader users.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Prefix"
@@ -97,6 +144,24 @@
             }
         </BitDropdown>
         <br /><br />
+        <BitDropdown Label="Templates"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>"
+                     TValue="string">
+            <PrefixTemplate>
+                <BitIcon IconName="@BitIconName.ShoppingCart" Style="padding-inline:0.5rem" />
+            </PrefixTemplate>
+            <SuffixTemplate>
+                <BitIcon IconName="@BitIconName.Info" Style="padding-inline:0.5rem" />
+            </SuffixTemplate>
+            <Options>
+                @foreach (var item in basicItems)
+                {
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+                }
+            </Options>
+        </BitDropdown>
+        <br /><br />
         <BitDropdown Label="Disabled"
                      Prefix="Fruits:"
                      Suffix="kg"
@@ -113,7 +178,11 @@
 </DemoExample>
 
 <DemoExample Title="FitWidth" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3" PreventRenderForMcpClient>
-    <div>Enables fit-content width for the dropdown that sets the width of the component based on its content size.</div>
+    <div>
+        The <b>FitWidth</b> parameter makes the dropdown only as wide as its content instead of stretching to the full
+        width of its container, which suits toolbars and inline filters where a full-width control would look out of
+        place. The callout still matches the width of the dropdown unless <b>PreserveCalloutWidth</b> is set.
+    </div>
     <br /><br />
     <BitDropdown Label="Single select" FitWidth
                  Placeholder="Select an item"
@@ -136,8 +205,12 @@
     </BitDropdown>
 </DemoExample>
 
-<DemoExample Title="NoBorder" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4" PreventRenderForMcpClient>
-    <div>The dropdown can be rendered without any border.</div>
+<DemoExample Title="NoBorder & Transparent" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4" PreventRenderForMcpClient>
+    <div>
+        The <b>NoBorder</b> parameter removes the border of the dropdown and <b>Transparent</b> removes its background,
+        so the control can sit on a colored or image surface without cutting a box out of it. They are independent and
+        combine freely; the callout keeps its own surface either way, so the items stay readable.
+    </div>
     <br /><br />
     <div style="max-width:10rem">
         <BitDropdown NoBorder
@@ -158,11 +231,27 @@
                 <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
             }
         </BitDropdown>
+        <br /><br />
+        <div style="padding:0.5rem;border-radius:0.5rem;background:linear-gradient(90deg,#ff00cc7f,#3333997f)">
+            <BitDropdown Transparent
+                         Placeholder="Select an item"
+                         TItem="BitDropdownOption<string>" TValue="string">
+                @foreach (var item in basicItems)
+                {
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+                }
+            </BitDropdown>
+        </div>
     </div>
 </DemoExample>
 
 <DemoExample Title="Responsive" RazorCode="@example5RazorCode" Id="example5" PreventRenderForMcpClient>
-    <div>When the <b>IsResponsive</b> parameter is true, on small screens the drop down items will render in a side panel.</div>
+    <div>
+        When the <b>Responsive</b> parameter is true, the callout turns into a side panel on small screens instead of a
+        floating list, making long item lists easier to use on mobile devices. The panel carries the label of the
+        dropdown and a close button, and it can also be dismissed by swiping it away. Resize the window below the small
+        breakpoint to see it.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Responsive Dropdown"
@@ -184,7 +273,13 @@
 </DemoExample>
 
 <DemoExample Title="Drop direction" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6" PreventRenderForMcpClient>
-    <div>Explores different drop directions for the BitDropdown component, including automatic and explicit directions.</div>
+    <div>
+        The <b>DropDirection</b> parameter determines which directions the callout is allowed to open in. <b>All</b>
+        picks whichever side fits best in the viewport, while <b>TopAndBottom</b> (the default) restricts it to opening
+        above or below the dropdown. In both cases the callout flips to the opposite side when there is not enough room,
+        and its item list is capped to the space that is actually available, so it never runs past the edge of the
+        screen. Scroll the page so that these dropdowns sit near the top or the bottom of the viewport to see it.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="All"
@@ -210,7 +305,12 @@
 </DemoExample>
 
 <DemoExample Title="Clear button" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7" PreventRenderForMcpClient>
-    <div>Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.</div>
+    <div>
+        The <b>ShowClearButton</b> parameter adds a button that clears the current selection whenever the dropdown has
+        a value, in both single and multi select modes. Clearing raises the usual value change events, plus the
+        dedicated <b>OnClear</b> callback. The button is hidden while the dropdown is read-only or disabled, so it
+        never offers an action that would be ignored.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="clearValue"
@@ -240,11 +340,33 @@
         </BitDropdown>
         <br />
         <div>Values: @string.Join(',', clearValues)</div>
+        <br /><br /><br /><br />
+        <div><b>OnClear</b>:</div><br />
+        <BitDropdown ShowClearButton
+                     DefaultValue="@("f-app")"
+                     Label="Single select dropdown"
+                     Placeholder="Select an option"
+                     OnClear="() => clearCounter++"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br />
+        <div>OnClear count: @clearCounter</div>
     </div>
 </DemoExample>
 
 <DemoExample Title="SearchBox" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8" PreventRenderForMcpClient>
-    <div>Examples of dropdowns with search functionality, including default and custom search functions.</div>
+    <div>
+        The <b>ShowSearchBox</b> parameter adds a search input at the top of the callout to filter the items, and
+        <b>SearchBoxPlaceholder</b> sets its placeholder. By default an item matches when its text contains the typed
+        term, ignoring case; <b>SearchFunction</b> replaces that algorithm with any predicate of your own (the examples
+        below switch it to a starts-with and an ends-with match). <b>AutoFocusSearchBox</b> puts the caret in the search
+        input as soon as the callout opens, so typing filters right away. The search term is discarded whenever the
+        callout closes, so the next opening always starts from the full list.
+    </div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Single select & auto focus"
@@ -304,11 +426,83 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Immediate search" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9" PreventRenderForMcpClient>
+<DemoExample Title="Search options" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9" PreventRenderForMcpClient>
+    <div>
+        Three parameters tune the default search without replacing it. <b>SearchMode</b> picks how the text of an item
+        is matched against the typed term &mdash; <b>Contains</b> (the default), <b>StartsWith</b>, <b>EndsWith</b> or
+        <b>ExactMatch</b>, always ignoring case. <b>MinSearchLength</b> holds the filtering back until the term reaches the
+        given number of characters, which keeps a one-letter term from being treated as a real query (and, with an
+        <b>ItemsProvider</b>, from turning every first keystroke into a request). <b>HighlightSearch</b> emphasizes the
+        matched part of each item text so the reason an item is in the result is visible at a glance. Whenever a search
+        is active the number of results is also announced to screen readers, with a message you can localize through
+        the <b>SearchResultsText</b> parameter.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="SearchMode: StartsWith"
+                     ShowSearchBox
+                     AutoFocusSearchBox
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Type a first letter"
+                     SearchMode="BitDropdownSearchMode.StartsWith"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="MinSearchLength: 3"
+                     ShowSearchBox
+                     AutoFocusSearchBox
+                     MinSearchLength="3"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Type at least 3 characters"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="HighlightSearch"
+                     ShowSearchBox
+                     AutoFocusSearchBox
+                     HighlightSearch
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="Highlight in the ComboBox"
+                     Combo
+                     HighlightSearch
+                     DefaultValue="@string.Empty"
+                     Placeholder="Type to filter"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in comboBoxItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+    </div>
+</DemoExample>
+
+<DemoExample Title="Immediate search" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10" PreventRenderForMcpClient>
     <div>
-        By default, the search and combo box inputs raise their search as you commit the input (on the change event).
-        Enabling <b>Immediate</b> makes the search happen as you type (on the input event). You can also rate-limit the
-        immediate search using <b>DebounceTime</b> or <b>ThrottleTime</b> (in milliseconds).
+        By default the search box raises its search when the input is committed (on the change event). Enabling
+        <b>Immediate</b> makes it search as you type (on the input event) instead. Because that can mean a request per
+        keystroke with a remote data source, the immediate search can be rate-limited: <b>DebounceTime</b> waits until
+        the typing pauses for the given number of milliseconds and then searches once, while <b>ThrottleTime</b> lets
+        at most one search through per interval while the typing continues. The <b>OnSearch</b> event reports every
+        search term that gets through.
     </div>
     <br /><br />
     <div class="example-content">
@@ -355,8 +549,13 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Validation" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10" PreventRenderForMcpClient>
-    <div>Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.</div>
+<DemoExample Title="Validation" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11" PreventRenderForMcpClient>
+    <div>
+        BitDropdown is a regular form input: inside an <b>EditForm</b> it takes part in data annotations validation,
+        turns red and reports itself as invalid to assistive technologies when its field has an error, and renders a
+        <b>ValidationMessage</b> like any other input. This example requires a value in the single select dropdown and
+        keeps the number of selected items of the multi select one within a range.
+    </div>
     <br />
     <div class="example-content">
         @if (string.IsNullOrEmpty(successMessage))
@@ -403,8 +602,17 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Customization" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11" PreventRenderForMcpClient>
-    <div>Shows how to customize dropdowns using templates for header, text, item, placeholder, label, and callout sections.</div>
+<DemoExample Title="Customization" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12" PreventRenderForMcpClient>
+    <div>
+        Nearly every part of the dropdown can be replaced with your own content. <b>ItemTemplate</b> and
+        <b>HeaderTemplate</b> render the normal items and the group headers of the callout, <b>TextTemplate</b> renders
+        the selected value shown on the closed dropdown and <b>PlaceholderTemplate</b> what is shown while nothing is
+        selected, <b>LabelTemplate</b> replaces the label, <b>CaretDownIconName</b> and <b>CaretDownTemplate</b> the
+        chevron, and <b>CalloutHeaderTemplate</b> and <b>CalloutFooterTemplate</b> add fixed content above and below the
+        scrollable item list &mdash; the footer being the usual home of an "add a new item" action. The templates that
+        render an item receive the item itself, so the extra state carried in its <b>Data</b> property is available to
+        them.
+    </div>
     <br /><br />
     <div class="example-content">
         <BitDropdown Label="Header template"
@@ -491,6 +699,20 @@
             }
         </BitDropdown>
         <br /><br />
+        <BitDropdown Label="CaretDownTemplate"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            <CaretDownTemplate>
+                <BitIcon IconName="@BitIconName.FavoriteStar" Style="font-size:0.875rem" />
+            </CaretDownTemplate>
+            <Options>
+                @foreach (var item in dataItems)
+                {
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" />
+                }
+            </Options>
+        </BitDropdown>
+        <br /><br />
         <BitDropdown Label="Callout templates"
                      Placeholder="Select an item"
                      TItem="BitDropdownOption<string>" TValue="string">
@@ -510,11 +732,20 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Binding" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12" PreventRenderForMcpClient>
-    <div>Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.</div>
+<DemoExample Title="Binding" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13" PreventRenderForMcpClient>
+    <div>
+        Every piece of the dropdown's state can be bound or observed. The selection is two-way bound over <b>Value</b>
+        in single select mode and <b>Values</b> in multi select mode, or left uncontrolled with <b>DefaultValue</b> and
+        <b>DefaultValues</b> and observed through the <b>OnChange</b> and <b>OnValuesChange</b> events;
+        <b>OnSelectItem</b> hands over the clicked item itself rather than its value. <b>Reselectable</b> makes the
+        select events fire even when the already selected item is picked again, which is otherwise treated as a no-op.
+        The open state of the callout is two-way bound via <b>IsOpen</b>, so it can be opened and closed from code, and
+        the <b>OnOpen</b> and <b>OnClose</b> events report every change to it &mdash; a natural place to start fetching
+        the items on first open.
+    </div>
     <br /><br />
     <div class="example-content">
-        <div>Two-way binding:</div><br />
+        <div><b>Two-way binding</b>:</div><br />
         <BitDropdown @bind-Value="controlledValue"
                      Label="Single select"
                      Placeholder="Select an item"
@@ -546,7 +777,7 @@
         <br />
         <div>Selected Values: @string.Join(",", controlledValues)</div>
         <br /><br /><br /><br />
-        <div>OnChange:</div><br />
+        <div><b>OnChange</b>:</div><br />
         <BitDropdown Label="Single select"
                      Placeholder="Select an item"
                      TItem="BitDropdownOption<string>" TValue="string"
@@ -572,7 +803,7 @@
         <br />
         <div>Changed Values: @string.Join(",", changedValues)</div>
         <br /><br /><br /><br />
-        <div>OnSelectItem:</div><br />
+        <div><b>OnSelectItem</b>:</div><br />
         <BitDropdown Label="Single select"
                      DefaultValue="@string.Empty"
                      Placeholder="Select an item"
@@ -599,11 +830,61 @@
         </BitDropdown>
         <br />
         <div>Selected Value: @selectedItem2?.Value</div>
+        <br /><br /><br /><br />
+        <div><b>Reselectable</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     Reselectable
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string"
+                     OnSelectItem="(BitDropdownOption<string> item) => selectItemCounter++">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br />
+        <div>OnSelectItem count: @selectItemCounter</div>
+        <br /><br /><br /><br />
+        <div><b>IsOpen</b>:</div><br />
+        <BitButton OnClick="() => isDropdownOpen = true">Open the dropdown</BitButton>
+        <br /><br />
+        <BitDropdown @bind-IsOpen="isDropdownOpen"
+                     Label="Single select"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br /><br /><br />
+        <div><b>OnOpen & OnClose</b>:</div><br />
+        <BitDropdown Label="Single select"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     OnOpen="HandleOnCalloutOpen"
+                     OnClose="HandleOnCalloutClose"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br />
+        <div>The callout is @calloutState.</div>
     </div>
 </DemoExample>
 
-<DemoExample Title="ComboBox" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13" PreventRenderForMcpClient>
-    <div>When the <b>Combo</b> parameter is true, you can type in BitDropdown input and search between items.</div>
+<DemoExample Title="ComboBox" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14" PreventRenderForMcpClient>
+    <div>
+        The <b>Combo</b> parameter turns the dropdown into a ComboBox: an editable input renders in place of the selected
+        text and filters the items as you type, so the trigger doubles as the search box. <b>Enter</b> selects the item
+        whose text matches what was typed, <b>Backspace</b> on an empty input removes the last selected item, the arrow
+        keys open the callout, and a term that was typed but never turned into a selection is discarded when the callout
+        closes, so the input goes back to showing the current selection.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample1"
@@ -635,8 +916,12 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Chips" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14" PreventRenderForMcpClient>
-    <div>When the <b>Chips</b> parameter is true, shows the selected items like chips in the ComboBox.</div>
+<DemoExample Title="Chips" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15" PreventRenderForMcpClient>
+    <div>
+        When the <b>Chips</b> parameter is true, the selected items render as chips inside the dropdown instead of one
+        joined text, each with its own remove button that is reachable with the keyboard and announced with the text of
+        the item it removes. It works in both single and multi select modes and pairs naturally with the ComboBox mode.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample2"
@@ -668,8 +953,99 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Dynamic ComboBox" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15" PreventRenderForMcpClient>
-    <div>When the <b>Dynamic</b> parameter is true, you can add a new item in the ComboBox.</div>
+<DemoExample Title="Selection display" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16" PreventRenderForMcpClient>
+    <div>
+        A multi select dropdown that lists every selected item quickly runs out of room. <b>MaxDisplayedItems</b> caps
+        how many of them the closed dropdown shows: with <b>Chips</b> the extra ones collapse into an overflow chip
+        whose text comes from <b>OverflowTextFormat</b> (<b>"+{0}"</b> by default), and without chips the joined list
+        is replaced by the summary of <b>SelectedItemsTextFormat</b> (<b>"{0} items selected"</b> by default) as soon
+        as the limit is passed. Nothing is removed from the selection &mdash; only the way it is displayed changes.
+        <br /><br />
+        <b>AutoClearSearch</b> covers the other half of a multi select session: the callout stays open after a pick, so
+        by default the next item has to be found through the filter left over from the previous one. Enabling it clears
+        the search text after every selection instead.
+        <b>HideSelectedItems</b> goes one step further and drops the picked items out of the callout altogether, which
+        makes sense when the chips already show what is selected and the list is only about what is left to choose.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="MaxDisplayedItems (chips)"
+                     Chips
+                     MultiSelect
+                     MaxDisplayedItems="2"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban", "f-gra", "v-car" })"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="OverflowTextFormat"
+                     Chips
+                     MultiSelect
+                     MaxDisplayedItems="2"
+                     OverflowTextFormat="and {0} more"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban", "f-gra", "v-car" })"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="SelectedItemsTextFormat"
+                     MultiSelect
+                     MaxDisplayedItems="2"
+                     SelectedItemsTextFormat="{0} fruits and vegetables"
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban", "f-gra", "v-car" })"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="AutoClearSearch"
+                     Combo Chips
+                     MultiSelect
+                     AutoClearSearch
+                     DefaultValues="@(Array.Empty<string>())"
+                     Placeholder="Type to filter, then pick"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in comboBoxItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="HideSelectedItems"
+                     Chips
+                     MultiSelect
+                     HideSelectedItems
+                     Placeholder="Select items"
+                     DefaultValues="@(new[] { "f-app", "f-ban" })"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+    </div>
+</DemoExample>
+
+<DemoExample Title="Dynamic ComboBox" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17" PreventRenderForMcpClient>
+    <div>
+        When the <b>Dynamic</b> parameter is true, a text typed into the ComboBox that matches no existing item can be
+        added as a new one, which is what makes free-form values (tags, e-mail recipients, ad-hoc categories) possible.
+        <b>DynamicValueGenerator</b> produces the value of the new item from its text and <b>OnDynamicAdd</b> notifies
+        about the addition so the item can be persisted into the source collection. Before creating anything the
+        component first looks for an existing match; <b>FindItemFunction</b> and <b>ExistsSelectedItemFunction</b>
+        replace the default case-insensitive text comparison used for those two lookups.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown @bind-Value="comboBoxValueSample3"
@@ -688,7 +1064,7 @@
         <div>Value: @comboBoxValueSample3</div>
     </div>
     <br /><br /><br /><br />
-    <div>When the <b>Combo</b>, <b>Chips</b> and <b>Dynamic</b> parameters are true, you can add a new item in the ComboBox (pressing the enter key or touching the add button on the mobile).</div>
+    <div>Combining the <b>Combo</b>, <b>Chips</b> and <b>Dynamic</b> parameters, new items get added by pressing the enter key (or the add button of the responsive panel on mobile) and render as removable chips.</div>
     <br />
     <div class="example-content">
         <br />
@@ -727,23 +1103,23 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="External Icons" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16" PreventRenderForMcpClient>
+<DemoExample Title="Keyboard navigation" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18" PreventRenderForMcpClient>
     <div>
-        Use icons from external libraries like FontAwesome and Bootstrap Icons with the <b>CaretDownIcon</b>, 
-        <b>ClearButtonIcon</b>, <b>ChipsRemoveIcon</b>, <b>SearchBoxIcon</b>, <b>SearchBoxClearIcon</b>, and 
-        <b>ResponsiveCloseIcon</b> parameters on the dropdown and the <b>Icon</b> or <b>IconName</b> 
-        parameters on <b>BitDropdownOption</b>.
+        The dropdown is fully operable with the keyboard, following the ARIA authoring practices for a combobox:
+        <b>Enter</b>, <b>Space</b> and the arrow keys open the callout and put the focus on the selected item (or the
+        first one), <b>ArrowUp</b> and <b>ArrowDown</b> move between the items, <b>Home</b> and <b>End</b> jump to the
+        first and the last one, <b>PageUp</b> and <b>PageDown</b> jump several items at a time, <b>Enter</b> and <b>Space</b>
+        select the focused item, <b>Escape</b> and <b>Alt+ArrowUp</b> close the callout and return the focus to the
+        dropdown, and <b>Tab</b> closes it and moves on. Typing printable characters runs a typeahead: the accumulated characters jump to the
+        item starting with them, repeating one character cycles through the items starting with it, and the buffer
+        resets after a short pause. Disabled and hidden items are skipped throughout. In virtualize mode only the
+        rendered items take part in the typeahead, since the ones that have not been rendered yet have no text to
+        match against.
     </div>
-    
     <br />
-    <br />
-    
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
-    
     <div class="example-content">
-        <BitDropdown Label="Caret down icon (external)"
-                     CaretDownIcon="@BitIconInfo.Css("fa-solid fa-circle-chevron-down")"
+        <BitDropdown Label="Single select"
+                     DefaultValue="@string.Empty"
                      Placeholder="Select an item"
                      TItem="BitDropdownOption<string>" TValue="string">
             @foreach (var item in basicItems)
@@ -751,103 +1127,245 @@
                 <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
             }
         </BitDropdown>
-
         <br /><br />
-
-        <BitDropdown Label="Clear button icon (external)"
-                     ShowClearButton
-                     ClearButtonIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
-                     Placeholder="Select an item"
+        <BitDropdown Label="Multi select"
+                     MultiSelect
+                     Placeholder="Select items"
+                     DefaultValue="@string.Empty"
                      TItem="BitDropdownOption<string>" TValue="string">
             @foreach (var item in basicItems)
             {
                 <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
             }
         </BitDropdown>
+    </div>
+</DemoExample>
 
-        <br /><br />
-
-        <BitDropdown Label="Chips remove icon (external)"
-                     Chips
-                     MultiSelect
-                     ChipsRemoveIcon="@BitIconInfo.Css("bi bi-x-circle")"
-                     Placeholder="Select items"
+<DemoExample Title="Select all" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
+    <div>
+        When the <b>ShowSelectAll</b> parameter is true, a select all item renders above the item list of a multi select
+        dropdown. It selects everything with one click and clears everything with the next, and its check box shows an
+        indeterminate state while only some of the items are selected, so it doubles as a summary of the current
+        selection. It only ever applies to what the user can actually see: disabled items are skipped, and while a
+        search is active it selects the search result rather than the whole list, leaving selections made outside the
+        result untouched. The <b>SelectAllText</b> parameter customizes its text. It is not available when the items
+        come from an <b>ItemsProvider</b>, since the items that are not loaded yet cannot be selected.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown @bind-Values="selectAllValues"
+                     MultiSelect
+                     ShowSelectAll
+                     Placeholder="Select items"
+                     Label="Select all"
                      TItem="BitDropdownOption<string>" TValue="string">
             @foreach (var item in basicItems)
             {
                 <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
             }
         </BitDropdown>
-
+        <br />
+        <div>Values: @string.Join(',', selectAllValues)</div>
         <br /><br />
+        <BitDropdown MultiSelect
+                     ShowSelectAll
+                     ShowSearchBox
+                     SelectAllText="Select all of them"
+                     Placeholder="Select items"
+                     DefaultValue="@string.Empty"
+                     SearchBoxPlaceholder="Search items"
+                     Label="Custom text & search"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+    </div>
+</DemoExample>
 
-        <BitDropdown Label="Search box icons (external)"
+<DemoExample Title="Selection limit" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20" PreventRenderForMcpClient>
+    <div>
+        The <b>MaxSelectedItems</b> parameter limits how many items can be selected in the multi select dropdown. Once
+        the limit is reached the unselected items are disabled rather than silently refusing the click, so the boundary
+        is visible before it is hit, and they become available again as soon as an item is unselected. The select all
+        item honors the same limit and stops adding items once it is reached.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown @bind-Values="maxSelectedValues"
+                     MultiSelect
+                     MaxSelectedItems="2"
+                     Placeholder="Select up to 2 items"
+                     Label="Max 2 items"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br />
+        <div>Values: @string.Join(',', maxSelectedValues)</div>
+    </div>
+</DemoExample>
+
+<DemoExample Title="Empty state" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21" PreventRenderForMcpClient>
+    <div>
+        When there is no item to show, the callout renders a message instead of an empty list. There are two distinct
+        cases and each gets its own text: <b>EmptyText</b> and <b>EmptyTemplate</b> cover a list that has nothing in it
+        ("No items found" by default), while <b>NoResultsText</b> and <b>NoResultsTemplate</b> cover a search that
+        matched nothing ("No results found" by default) &mdash; telling the user that their term found nothing is a
+        different message from telling them the list is empty. When the no-results pair is not set the empty pair is used
+        for both cases.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="Default"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string" />
+        <br /><br />
+        <BitDropdown Label="EmptyText"
+                     Placeholder="Select an item"
+                     EmptyText="There is nothing here!"
+                     TItem="BitDropdownOption<string>" TValue="string" />
+        <br /><br />
+        <BitDropdown Label="EmptyTemplate"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            <EmptyTemplate>
+                <div class="custom-drp custom-drp-empty">
+                    <BitIcon IconName="@BitIconName.SearchIssue" />
+                    <div>Nothing to show!</div>
+                </div>
+            </EmptyTemplate>
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="Search without result"
                      ShowSearchBox
-                     SearchBoxIcon="@BitIconInfo.Css("fa-solid fa-magnifying-glass")"
-                     SearchBoxClearIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
+                     DefaultValue="@string.Empty"
                      Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search for anything"
                      TItem="BitDropdownOption<string>" TValue="string">
             @foreach (var item in basicItems)
             {
                 <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
             }
         </BitDropdown>
-
         <br /><br />
-
-        <BitDropdown Label="Item icons (IconName - Fluent UI)"
+        <BitDropdown Label="NoResultsText"
+                     ShowSearchBox
+                     DefaultValue="@string.Empty"
                      Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search for anything"
+                     NoResultsText="Nothing matched your search"
                      TItem="BitDropdownOption<string>" TValue="string">
-            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Fruits" Value="@string.Empty" />
-            <BitDropdownOption Text="Apple" Value="@("f-app")" IconName="@BitIconName.AllApps" />
-            <BitDropdownOption Text="Banana" Value="@("f-ban")" IconName="@BitIconName.Calculator" />
-            <BitDropdownOption Text="Orange" Value="@("f-ora")" IconName="@BitIconName.FavoriteStar" IsEnabled="false" />
-            <BitDropdownOption Text="Grape" Value="@("f-gra")" IconName="@BitIconName.Edit" />
-            <BitDropdownOption ItemType="BitDropdownItemType.Divider" Value="@string.Empty" />
-            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Vegetables" Value="@string.Empty" />
-            <BitDropdownOption Text="Broccoli" Value="@("v-bro")" IconName="@BitIconName.Health" />
-            <BitDropdownOption Text="Carrot" Value="@("v-car")" IconName="@BitIconName.Add" />
-            <BitDropdownOption Text="Lettuce" Value="@("v-let")" IconName="@BitIconName.ChevronDown" />
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
         </BitDropdown>
-
         <br /><br />
-
-        <BitDropdown Label="Item icons (Icon - FontAwesome)"
+        <BitDropdown Label="NoResultsTemplate"
+                     ShowSearchBox
+                     DefaultValue="@string.Empty"
                      Placeholder="Select an item"
+                     SearchBoxPlaceholder="Search for anything"
                      TItem="BitDropdownOption<string>" TValue="string">
-            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Fruits" Value="@string.Empty" />
-            <BitDropdownOption Text="Apple" Value="@("f-app")" Icon="@BitIconInfo.Css("fa-solid fa-apple-whole")" />
-            <BitDropdownOption Text="Banana" Value="@("f-ban")" Icon="@BitIconInfo.Css("fa-solid fa-moon")" />
-            <BitDropdownOption Text="Orange" Value="@("f-ora")" Icon="@BitIconInfo.Fa("solid lemon")" IsEnabled="false" />
-            <BitDropdownOption Text="Grape" Value="@("f-gra")" Icon="@BitIconInfo.Css("fa-solid fa-droplet")" />
-            <BitDropdownOption ItemType="BitDropdownItemType.Divider" Value="@string.Empty" />
-            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Vegetables" Value="@string.Empty" />
-            <BitDropdownOption Text="Broccoli" Value="@("v-bro")" Icon="@BitIconInfo.Css("fa-solid fa-seedling")" />
-            <BitDropdownOption Text="Carrot" Value="@("v-car")" Icon="@BitIconInfo.Css("fa-solid fa-carrot")" />
-            <BitDropdownOption Text="Lettuce" Value="@("v-let")" Icon="@BitIconInfo.Css("fa-solid fa-leaf")" />
+            <NoResultsTemplate>
+                <div class="custom-drp custom-drp-empty">
+                    <BitIcon IconName="@BitIconName.SearchAndApps" />
+                    <div>No match. Try another term!</div>
+                </div>
+            </NoResultsTemplate>
+            <Options>
+                @foreach (var item in basicItems)
+                {
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+                }
+            </Options>
         </BitDropdown>
+    </div>
+</DemoExample>
 
+<DemoExample Title="Loading" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22" PreventRenderForMcpClient>
+    <div>
+        The <b>IsLoading</b> parameter reports that the items are still on their way: a spinner replaces the caret
+        down element and the callout shows a loading indicator in place of the item list, while the dropdown itself
+        stays enabled so the user can still open it and see what is happening. The message is customized with the
+        <b>LoadingText</b> parameter and the whole indicator with the <b>LoadingTemplate</b> parameter.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="IsLoading"
+                     IsLoading
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
         <br /><br />
-
-        <BitDropdown Label="Item icons (Icon - Bootstrap Icons)"
+        <BitDropdown Label="LoadingText"
+                     IsLoading
+                     DefaultValue="@string.Empty"
                      Placeholder="Select an item"
+                     LoadingText="Fetching the products..."
                      TItem="BitDropdownOption<string>" TValue="string">
-            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Fruits" Value="@string.Empty" />
-            <BitDropdownOption Text="Apple" Value="@("f-app")" Icon="@BitIconInfo.Bi("apple")" />
-            <BitDropdownOption Text="Banana" Value="@("f-ban")" Icon="@BitIconInfo.Bi("flower1")" />
-            <BitDropdownOption Text="Orange" Value="@("f-ora")" Icon="@BitIconInfo.Css("bi bi-sun")" IsEnabled="false" />
-            <BitDropdownOption Text="Grape" Value="@("f-gra")" Icon="@BitIconInfo.Bi("droplet-fill")" />
-            <BitDropdownOption ItemType="BitDropdownItemType.Divider" Value="@string.Empty" />
-            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Vegetables" Value="@string.Empty" />
-            <BitDropdownOption Text="Broccoli" Value="@("v-bro")" Icon="@BitIconInfo.Bi("tree-fill")" />
-            <BitDropdownOption Text="Carrot" Value="@("v-car")" Icon="@BitIconInfo.Bi("egg")" />
-            <BitDropdownOption Text="Lettuce" Value="@("v-let")" Icon="@BitIconInfo.Bi("flower2")" />
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="LoadingTemplate"
+                     IsLoading
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            <LoadingTemplate>
+                <div class="custom-drp custom-drp-empty">
+                    <BitIcon IconName="@BitIconName.Sync" />
+                    <div>Just a moment...</div>
+                </div>
+            </LoadingTemplate>
+            <Options>
+                @foreach (var item in basicItems)
+                {
+                    <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+                }
+            </Options>
+        </BitDropdown>
+        <br /><br /><br /><br />
+        <div><b>A real fetch</b>: the items get loaded when the button is clicked.</div>
+        <br />
+        <BitButton OnClick="LoadDelayedItems" IsLoading="isLoadingItems">Load the items</BitButton>
+        <br /><br />
+        <BitDropdown Label="Products"
+                     IsLoading="isLoadingItems"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in delayedItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
         </BitDropdown>
     </div>
 </DemoExample>
 
-<DemoExample Title="Color" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17" PreventRenderForMcpClient>
-    <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
+<DemoExample Title="Virtualization" RazorCode="@example23RazorCode" Id="example23">
+    <div>Virtualizing large item lists is demonstrated with the <b>Items</b> and <b>ItemsProvider</b> APIs; check the <b>Item</b> and <b>Custom</b> tabs for the examples.</div>
+</DemoExample>
+
+<DemoExample Title="Color" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24" PreventRenderForMcpClient>
+    <div>
+        The <b>Color</b> parameter paints the accents of the dropdown &mdash; the focus border, the search box
+        underline and icon, the group headers and the check boxes of the multi select items &mdash; in one of the theme
+        colors, <b>Primary</b> being the default. It changes the accents only, not the surface of the control, so the
+        dropdown keeps fitting its surroundings.
+    </div>
     <br />
     <div class="example-content">
         <BitDropdown Label="Primary"
@@ -940,8 +1458,197 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="Style & Class" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18" PreventRenderForMcpClient>
-    <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
+<DemoExample Title="External Icons" RazorCode="@example25RazorCode" CsharpCode="@example25CsharpCode" Id="example25" PreventRenderForMcpClient>
+    <div>
+        Every icon of the dropdown can come from an external library instead of the built-in Fluent UI set. The
+        <b>CaretDownIcon</b>, <b>ClearButtonIcon</b>, <b>ChipsRemoveIcon</b>, <b>SearchBoxIcon</b>,
+        <b>SearchBoxClearIcon</b>, <b>ResponsiveCloseIcon</b> and <b>ItemCheckIcon</b> parameters take a
+        <b>BitIconInfo</b> &mdash; built with <b>BitIconInfo.Fa</b>, <b>BitIconInfo.Bi</b> or the generic
+        <b>BitIconInfo.Css</b> &mdash; and each takes precedence over its <b>...IconName</b> counterpart when both are
+        set. The items themselves follow the same rule through their <b>Icon</b> and <b>IconName</b> members. Remember
+        to reference the stylesheet of the icon library you use.
+    </div>
+    
+    <br />
+    <br />
+    
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
+    
+    <div class="example-content">
+        <BitDropdown Label="Caret down icon (external)"
+                     CaretDownIcon="@BitIconInfo.Css("fa-solid fa-circle-chevron-down")"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+
+        <br /><br />
+
+        <BitDropdown Label="Clear button icon (external)"
+                     ShowClearButton
+                     ClearButtonIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+
+        <br /><br />
+
+        <BitDropdown Label="Chips remove icon (external)"
+                     Chips
+                     MultiSelect
+                     ChipsRemoveIcon="@BitIconInfo.Css("bi bi-x-circle")"
+                     DefaultValues="@(Array.Empty<string>())"
+                     Placeholder="Select items"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+
+        <br /><br />
+
+        <BitDropdown Label="Search box icons (external)"
+                     ShowSearchBox
+                     SearchBoxIcon="@BitIconInfo.Css("fa-solid fa-magnifying-glass")"
+                     SearchBoxClearIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+
+        <br /><br />
+
+        <BitDropdown Label="Item check icon (external)"
+                     MultiSelect
+                     ItemCheckIcon="@BitIconInfo.Css("fa-solid fa-heart")"
+                     DefaultValues="@(Array.Empty<string>())"
+                     Placeholder="Select items"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+
+        <br /><br />
+
+        <BitDropdown Label="Item icons (IconName - Fluent UI)"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Fruits" Value="@string.Empty" />
+            <BitDropdownOption Text="Apple" Value="@("f-app")" IconName="@BitIconName.AllApps" />
+            <BitDropdownOption Text="Banana" Value="@("f-ban")" IconName="@BitIconName.Calculator" />
+            <BitDropdownOption Text="Orange" Value="@("f-ora")" IconName="@BitIconName.FavoriteStar" IsEnabled="false" />
+            <BitDropdownOption Text="Grape" Value="@("f-gra")" IconName="@BitIconName.Edit" />
+            <BitDropdownOption ItemType="BitDropdownItemType.Divider" Value="@string.Empty" />
+            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Vegetables" Value="@string.Empty" />
+            <BitDropdownOption Text="Broccoli" Value="@("v-bro")" IconName="@BitIconName.Health" />
+            <BitDropdownOption Text="Carrot" Value="@("v-car")" IconName="@BitIconName.Add" />
+            <BitDropdownOption Text="Lettuce" Value="@("v-let")" IconName="@BitIconName.ChevronDown" />
+        </BitDropdown>
+
+        <br /><br />
+
+        <BitDropdown Label="Item icons (Icon - FontAwesome)"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Fruits" Value="@string.Empty" />
+            <BitDropdownOption Text="Apple" Value="@("f-app")" Icon="@BitIconInfo.Css("fa-solid fa-apple-whole")" />
+            <BitDropdownOption Text="Banana" Value="@("f-ban")" Icon="@BitIconInfo.Css("fa-solid fa-moon")" />
+            <BitDropdownOption Text="Orange" Value="@("f-ora")" Icon="@BitIconInfo.Fa("solid lemon")" IsEnabled="false" />
+            <BitDropdownOption Text="Grape" Value="@("f-gra")" Icon="@BitIconInfo.Css("fa-solid fa-droplet")" />
+            <BitDropdownOption ItemType="BitDropdownItemType.Divider" Value="@string.Empty" />
+            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Vegetables" Value="@string.Empty" />
+            <BitDropdownOption Text="Broccoli" Value="@("v-bro")" Icon="@BitIconInfo.Css("fa-solid fa-seedling")" />
+            <BitDropdownOption Text="Carrot" Value="@("v-car")" Icon="@BitIconInfo.Css("fa-solid fa-carrot")" />
+            <BitDropdownOption Text="Lettuce" Value="@("v-let")" Icon="@BitIconInfo.Css("fa-solid fa-leaf")" />
+        </BitDropdown>
+
+        <br /><br />
+
+        <BitDropdown Label="Item icons (Icon - Bootstrap Icons)"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Fruits" Value="@string.Empty" />
+            <BitDropdownOption Text="Apple" Value="@("f-app")" Icon="@BitIconInfo.Bi("apple")" />
+            <BitDropdownOption Text="Banana" Value="@("f-ban")" Icon="@BitIconInfo.Bi("flower1")" />
+            <BitDropdownOption Text="Orange" Value="@("f-ora")" Icon="@BitIconInfo.Css("bi bi-sun")" IsEnabled="false" />
+            <BitDropdownOption Text="Grape" Value="@("f-gra")" Icon="@BitIconInfo.Bi("droplet-fill")" />
+            <BitDropdownOption ItemType="BitDropdownItemType.Divider" Value="@string.Empty" />
+            <BitDropdownOption ItemType="BitDropdownItemType.Header" Text="Vegetables" Value="@string.Empty" />
+            <BitDropdownOption Text="Broccoli" Value="@("v-bro")" Icon="@BitIconInfo.Bi("tree-fill")" />
+            <BitDropdownOption Text="Carrot" Value="@("v-car")" Icon="@BitIconInfo.Bi("egg")" />
+            <BitDropdownOption Text="Lettuce" Value="@("v-let")" Icon="@BitIconInfo.Bi("flower2")" />
+        </BitDropdown>
+    </div>
+</DemoExample>
+
+<DemoExample Title="Size" RazorCode="@example26RazorCode" CsharpCode="@example26CsharpCode" Id="example26" PreventRenderForMcpClient>
+    <div>
+        The <b>Size</b> parameter scales the whole component in one step, <b>Medium</b> being the default: the height
+        and the font size of the dropdown, of its search box and of the items in the callout all follow the chosen size.
+    </div>
+    <br />
+    <div class="example-content">
+        <BitDropdown Label="Small"
+                     ShowSearchBox
+                     Size="BitSize.Small"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="Medium"
+                     ShowSearchBox
+                     Size="BitSize.Medium"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+        <br /><br />
+        <BitDropdown Label="Large"
+                     ShowSearchBox
+                     Size="BitSize.Large"
+                     DefaultValue="@string.Empty"
+                     Placeholder="Select an item"
+                     TItem="BitDropdownOption<string>" TValue="string">
+            @foreach (var item in basicItems)
+            {
+                <BitDropdownOption ItemType="item.ItemType" Text="@item.Text" Value="item.Value" IsEnabled="item.IsEnabled" />
+            }
+        </BitDropdown>
+    </div>
+</DemoExample>
+
+<DemoExample Title="Style & Class" RazorCode="@example27RazorCode" CsharpCode="@example27CsharpCode" Id="example27" PreventRenderForMcpClient>
+    <div>
+        The dropdown can be styled at every level: <b>Style</b> and <b>Class</b> apply to the root element, each item
+        carries its own style and class, and the <b>Styles</b> and <b>Classes</b> parameters reach every internal part
+        of the component individually &mdash; the label, the container, the callout, the search box, the scroll
+        container, the items and everything else listed in the class-styles reference below. Because the callout is
+        rendered outside the root element, styling it through <b>Styles.Callout</b> or <b>Classes.Callout</b> is the way
+        to reach it rather than a descendant selector on the root.
+    </div>
     <br /><br />
     <div class="example-content">
         <div>Component's Style & Class:</div><br />
@@ -1002,8 +1709,13 @@
     </div>
 </DemoExample>
 
-<DemoExample Title="RTL" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19" PreventRenderForMcpClient>
-    <div>Use BitDropdown in right-to-left (RTL).</div>
+<DemoExample Title="RTL" RazorCode="@example28RazorCode" CsharpCode="@example28CsharpCode" Id="example28" PreventRenderForMcpClient>
+    <div>
+        Setting the <b>Dir</b> parameter to <b>Rtl</b> renders the dropdown right-to-left for languages like Arabic,
+        Persian and Hebrew: the text, the label, the chevron, the check boxes and the search box all mirror, the
+        callout aligns to the right edge of the dropdown, and the responsive panel slides in from the left and is
+        swiped away in the opposite direction.
+    </div>
     <br />
     <dir dir="rtl" style="padding:0">
         <div class="example-content">
@@ -1040,8 +1752,4 @@
             </BitDropdown>
         </div>
     </dir>
-</DemoExample>
-
-<DemoExample Title="Virtualization" RazorCode="@example20RazorCode" Id="example20">
-    <div>Not applicable to option demo!</div>
 </DemoExample>
\ No newline at end of file
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs
index 2baa6b22e7..4eb5679f87 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.cs
@@ -69,6 +69,12 @@ public partial class _BitDropdownOptionDemo
     ];
 
 
+    private IEnumerable<string?> selectAllValues = [];
+    private IEnumerable<string?> maxSelectedValues = [];
+
+    private bool isDropdownOpen;
+    private int selectItemCounter;
+
     private string controlledValue = "f-app";
     private IEnumerable<string?> controlledValues = ["f-app", "f-ban"];
 
@@ -80,6 +86,12 @@ public partial class _BitDropdownOptionDemo
 
     private string? clearValue = "f-app";
     private IEnumerable<string?> clearValues = ["f-app", "f-ban"];
+    private int clearCounter;
+
+    private string calloutState = "closed";
+
+    private bool isLoadingItems;
+    private List<BitDropdownItem<string>> delayedItems = [];
 
     private string? immediateSearchValue;
     private string? debouncedSearchValue;
@@ -124,4 +136,19 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     {
         comboBoxItems.Add(new() { Text = item.Text, Value = item.Value });
     }
+
+    private void HandleOnCalloutOpen() => calloutState = "opened";
+
+    private void HandleOnCalloutClose() => calloutState = "closed";
+
+    private async Task LoadDelayedItems()
+    {
+        isLoadingItems = true;
+        delayedItems = [];
+
+        await Task.Delay(2000);
+
+        delayedItems = [.. basicItems];
+        isLoadingItems = false;
+    }
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
index 0d97b9eed5..c3664b711b 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Dropdown/_BitDropdownOptionDemo.razor.samples.cs
@@ -56,6 +56,40 @@ public partial class _BitDropdownOptionDemo
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
+</BitDropdown>
+
+<BitDropdown Label=""ReadOnly""
+             ReadOnly
+             DefaultValue=""@(""f-app"")""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Custom delimiter""
+             MultiSelect
+             MultiSelectDelimiter="" - ""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"" })""
+             Placeholder=""Select items""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Title""
+             Title=""Pick your favorite fruit or vegetable""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Hover me""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
 </BitDropdown>";
     private readonly string example1CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
@@ -107,6 +141,24 @@ public partial class _BitDropdownOptionDemo
     }
 </BitDropdown>
 
+<BitDropdown Label=""Templates""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>""
+             TValue=""string"">
+    <PrefixTemplate>
+        <BitIcon IconName=""@BitIconName.ShoppingCart"" Style=""padding-inline:0.5rem"" />
+    </PrefixTemplate>
+    <SuffixTemplate>
+        <BitIcon IconName=""@BitIconName.Info"" Style=""padding-inline:0.5rem"" />
+    </SuffixTemplate>
+    <Options>
+        @foreach (var item in basicItems)
+        {
+            <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+        }
+    </Options>
+</BitDropdown>
+
 <BitDropdown Label=""Disabled""
              Prefix=""Fruits:""
              Suffix=""kg""
@@ -187,7 +239,18 @@ public partial class _BitDropdownOptionDemo
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
-</BitDropdown>";
+</BitDropdown>
+
+<div style=""padding:0.5rem;border-radius:0.5rem;background:linear-gradient(90deg,#ff00cc7f,#3333997f)"">
+    <BitDropdown Transparent
+                 Placeholder=""Select an item""
+                 TItem=""BitDropdownOption<string>"" TValue=""string"">
+        @foreach (var item in basicItems)
+        {
+            <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+        }
+    </BitDropdown>
+</div>";
     private readonly string example4CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
 [
@@ -275,8 +338,22 @@ protected override void OnInitialized()
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
-<div>Values: @string.Join(',', clearValues)</div>";
+<div>Values: @string.Join(',', clearValues)</div>
+
+<BitDropdown ShowClearButton
+             DefaultValue=""@(""f-app"")""
+             Label=""Single select dropdown""
+             Placeholder=""Select an option""
+             OnClear=""() => clearCounter++""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+<div>OnClear count: @clearCounter</div>";
     private readonly string example7CsharpCode = @"
+private int clearCounter;
 private string? clearValue = ""f-app"";
 private ICollection<string?> clearValues = new[] { ""f-app"", ""f-ban"" };
 
@@ -366,6 +443,89 @@ protected override void OnInitialized()
 ];";
 
     private readonly string example9RazorCode = @"
+<BitDropdown Label=""SearchMode: StartsWith""
+             ShowSearchBox
+             AutoFocusSearchBox
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Type a first letter""
+             SearchMode=""BitDropdownSearchMode.StartsWith""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""MinSearchLength: 3""
+             ShowSearchBox
+             AutoFocusSearchBox
+             MinSearchLength=""3""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Type at least 3 characters""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""HighlightSearch""
+             ShowSearchBox
+             AutoFocusSearchBox
+             HighlightSearch
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Highlight in the ComboBox""
+             Combo
+             HighlightSearch
+             DefaultValue=""@string.Empty""
+             Placeholder=""Type to filter""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in comboBoxItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>";
+    private readonly string example9CsharpCode = @"
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];
+
+private readonly List<BitDropdownItem<string>> comboBoxItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
+
+    private readonly string example10RazorCode = @"
 <BitDropdown Label=""Immediate""
              ShowSearchBox
              Immediate
@@ -406,7 +566,7 @@ protected override void OnInitialized()
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>";
-    private readonly string example9CsharpCode = @"
+    private readonly string example10CsharpCode = @"
 private string? immediateSearchValue;
 private string? debouncedSearchValue;
 
@@ -438,7 +598,7 @@ protected override void OnInitialized()
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example11RazorCode = @"
 @using System.ComponentModel.DataAnnotations;
 
 <style>
@@ -476,7 +636,7 @@ protected override void OnInitialized()
 
     <BitButton ButtonType=""BitButtonType.Submit"">Submit</BitButton>
 </EditForm>";
-    private readonly string example10CsharpCode = @"
+    private readonly string example11CsharpCode = @"
 public class FormValidationDropdownModel
 {
     [MaxLength(2, ErrorMessage = ""The property {0} have more than {1} elements"")]
@@ -507,7 +667,7 @@ private void HandleInvalidSubmit() { }
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example11RazorCode = @"
+    private readonly string example12RazorCode = @"
 <style>
     .custom-drp {
         gap: 10px;
@@ -626,6 +786,20 @@ private void HandleInvalidSubmit() { }
     }
 </BitDropdown>
 
+<BitDropdown Label=""CaretDownTemplate""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    <CaretDownTemplate>
+        <BitIcon IconName=""@BitIconName.FavoriteStar"" Style=""font-size:0.875rem"" />
+    </CaretDownTemplate>
+    <Options>
+        @foreach (var item in dataItems)
+        {
+            <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" />
+        }
+    </Options>
+</BitDropdown>
+
 <BitDropdown Label=""Callout templates""
              Placeholder=""Select an item""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
@@ -642,7 +816,7 @@ private void HandleInvalidSubmit() { }
         }
     </Options>
 </BitDropdown>";
-    private readonly string example11CsharpCode = @"
+    private readonly string example12CsharpCode = @"
 private readonly List<BitDropdownItem<string>> dataItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Items"", Data = new DropdownItemData { IconName = ""BulletedList2"" }  },
@@ -656,7 +830,7 @@ private void HandleInvalidSubmit() { }
     new() { Text = ""Item f"", Value = ""F"", Data = new DropdownItemData { IconName = ""Running"" } }
 ];";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example13RazorCode = @"
 <BitDropdown @bind-Value=""controlledValue""
              Label=""Single select""
              Placeholder=""Select an item""
@@ -736,8 +910,54 @@ private void HandleInvalidSubmit() { }
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
-<div>Selected Value: @selectedItem2?.Value</div>";
-    private readonly string example12CsharpCode = @"
+<div>Selected Value: @selectedItem2?.Value</div>
+
+<BitDropdown Label=""Single select""
+             Reselectable
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string""
+             OnSelectItem=""(BitDropdownOption<string> item) => selectItemCounter++"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+<div>OnSelectItem count: @selectItemCounter</div>
+
+<BitButton OnClick=""() => isDropdownOpen = true"">Open the dropdown</BitButton>
+<BitDropdown @bind-IsOpen=""isDropdownOpen""
+             Label=""Single select""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Single select""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             OnOpen=""HandleOnCalloutOpen""
+             OnClose=""HandleOnCalloutClose""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+<div>The callout is @calloutState.</div>";
+    private readonly string example13CsharpCode = @"
+private bool isDropdownOpen;
+private int selectItemCounter;
+private string calloutState = ""closed"";
+
+private void HandleOnCalloutOpen() => calloutState = ""opened"";
+
+private void HandleOnCalloutClose() => calloutState = ""closed"";
+
 private string controlledValue = ""f-app"";
 private IEnumerable<string?> controlledValues = [""f-app"", ""f-ban""];
 
@@ -761,7 +981,7 @@ private void HandleInvalidSubmit() { }
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example14RazorCode = @"
 <BitDropdown @bind-Value=""comboBoxValueSample1""
              Combo
              Responsive
@@ -789,7 +1009,7 @@ MultiSelect Responsive
 </BitDropdown>
 <br />
 <div>Values: @string.Join(',', comboBoxValues1)</div>";
-    private readonly string example13CsharpCode = @"
+    private readonly string example14CsharpCode = @"
 private string comboBoxValueSample1 = default!;
 private ICollection<string> comboBoxValues1 = [];
 
@@ -807,7 +1027,7 @@ MultiSelect Responsive
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example14RazorCode = @"
+    private readonly string example15RazorCode = @"
 <BitDropdown @bind-Value=""comboBoxValueSample2""
              Combo Chips Responsive
              Label=""Single select combo box & chips""
@@ -834,7 +1054,7 @@ Responsive MultiSelect
 </BitDropdown>
 <br />
 <div>Values: @string.Join(',', comboBoxValues2)</div>";
-    private readonly string example14CsharpCode = @"
+    private readonly string example15CsharpCode = @"
 private string comboBoxValueSample2 = default!;
 private ICollection<string> comboBoxValues2 = [];
 
@@ -852,65 +1072,91 @@ Responsive MultiSelect
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example15RazorCode = @"
-<BitDropdown @bind-Value=""comboBoxValueSample3""
-             Combo Dynamic
-             Placeholder=""Select an option""
-             Label=""Single select combo box & dynamic""
-             TItem=""BitDropdownOption<string>"" TValue=""string""
-             DynamicValueGenerator=""(BitDropdownOption<string> item) => item.Text""
-             OnDynamicAdd=""(BitDropdownOption<string> item) => HandleOnDynamicAdd(item)"">
-    @foreach (var item in comboBoxItems)
+    private readonly string example16RazorCode = @"
+<BitDropdown Label=""MaxDisplayedItems (chips)""
+             Chips
+             MultiSelect
+             MaxDisplayedItems=""2""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"", ""f-gra"", ""v-car"" })""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
-<div>Value: @comboBoxValueSample3</div>
-        
-<BitDropdown @bind-Value=""comboBoxValueSample4""
-             Responsive
-             Combo Chips Dynamic
-             Placeholder=""Select an option""
-             Label=""Single select combo box, chips & dynamic""
-             TItem=""BitDropdownOption<string>"" TValue=""string""
-             DynamicValueGenerator=""(BitDropdownOption<string> item) => item.Text""
-             OnDynamicAdd=""(BitDropdownOption<string> item) => HandleOnDynamicAdd(item)"">
-    @foreach (var item in comboBoxItems)
+
+<BitDropdown Label=""OverflowTextFormat""
+             Chips
+             MultiSelect
+             MaxDisplayedItems=""2""
+             OverflowTextFormat=""and {0} more""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"", ""f-gra"", ""v-car"" })""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
-<div>Value: @comboBoxValueSample4</div>
 
-<BitDropdown @bind-Values=""comboBoxValues3""
-             Responsive
+<BitDropdown Label=""SelectedItemsTextFormat""
              MultiSelect
-             Combo Chips Dynamic
-             Placeholder=""Select options""
-             Label=""Multi select combo box, chips & dynamic""
-             TItem=""BitDropdownOption<string>"" TValue=""string""
-             DynamicValueGenerator=""(BitDropdownOption<string> item) => item.Text""
-             OnDynamicAdd=""(BitDropdownOption<string> item) => HandleOnDynamicAdd(item)"">
-    @foreach (var item in comboBoxItems)
+             MaxDisplayedItems=""2""
+             SelectedItemsTextFormat=""{0} fruits and vegetables""
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"", ""f-gra"", ""v-car"" })""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
-<div>Values: @string.Join(',', comboBoxValues3)</div>";
-    private readonly string example15CsharpCode = @"
-private string comboBoxValueSample3 = default!;
-private string comboBoxValueSample4 = default!;
-private ICollection<string> comboBoxValues3 = [];
 
-private void HandleOnDynamicAdd(BitDropdownOption<string> item)
-{
-    comboBoxItems.Add(new() { Text = item.Text, Value = item.Value });
-}
+<BitDropdown Label=""AutoClearSearch""
+             Combo Chips
+             MultiSelect
+             AutoClearSearch
+             DefaultValues=""@(Array.Empty<string>())""
+             Placeholder=""Type to filter, then pick""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in comboBoxItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
 
-private readonly List<BitDropdownItem<string>> comboBoxItems =
-[
-    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
-    new() { Text = ""Apple"", Value = ""f-app"" },
+<BitDropdown Label=""HideSelectedItems""
+             Chips
+             MultiSelect
+             HideSelectedItems
+             Placeholder=""Select items""
+             DefaultValues=""@(new[] { ""f-app"", ""f-ban"" })""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>";
+    private readonly string example16CsharpCode = @"
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];
+
+private readonly List<BitDropdownItem<string>> comboBoxItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
     new() { Text = ""Banana"", Value = ""f-ban"" },
     new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
     new() { Text = ""Grape"", Value = ""f-gra"" },
@@ -921,12 +1167,78 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example16RazorCode = @"
-<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
-<link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
+    private readonly string example17RazorCode = @"
+<BitDropdown @bind-Value=""comboBoxValueSample3""
+             Combo Dynamic
+             Placeholder=""Select an option""
+             Label=""Single select combo box & dynamic""
+             TItem=""BitDropdownOption<string>"" TValue=""string""
+             DynamicValueGenerator=""(BitDropdownOption<string> item) => item.Text""
+             OnDynamicAdd=""(BitDropdownOption<string> item) => HandleOnDynamicAdd(item)"">
+    @foreach (var item in comboBoxItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+<div>Value: @comboBoxValueSample3</div>
+        
+<BitDropdown @bind-Value=""comboBoxValueSample4""
+             Responsive
+             Combo Chips Dynamic
+             Placeholder=""Select an option""
+             Label=""Single select combo box, chips & dynamic""
+             TItem=""BitDropdownOption<string>"" TValue=""string""
+             DynamicValueGenerator=""(BitDropdownOption<string> item) => item.Text""
+             OnDynamicAdd=""(BitDropdownOption<string> item) => HandleOnDynamicAdd(item)"">
+    @foreach (var item in comboBoxItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+<div>Value: @comboBoxValueSample4</div>
 
-<BitDropdown Label=""Caret down icon (external)""
-             CaretDownIcon=""@BitIconInfo.Css(""fa-solid fa-circle-chevron-down"")""
+<BitDropdown @bind-Values=""comboBoxValues3""
+             Responsive
+             MultiSelect
+             Combo Chips Dynamic
+             Placeholder=""Select options""
+             Label=""Multi select combo box, chips & dynamic""
+             TItem=""BitDropdownOption<string>"" TValue=""string""
+             DynamicValueGenerator=""(BitDropdownOption<string> item) => item.Text""
+             OnDynamicAdd=""(BitDropdownOption<string> item) => HandleOnDynamicAdd(item)"">
+    @foreach (var item in comboBoxItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+<div>Values: @string.Join(',', comboBoxValues3)</div>";
+    private readonly string example17CsharpCode = @"
+private string comboBoxValueSample3 = default!;
+private string comboBoxValueSample4 = default!;
+private ICollection<string> comboBoxValues3 = [];
+
+private void HandleOnDynamicAdd(BitDropdownOption<string> item)
+{
+    comboBoxItems.Add(new() { Text = item.Text, Value = item.Value });
+}
+
+private readonly List<BitDropdownItem<string>> comboBoxItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
+
+    private readonly string example18RazorCode = @"
+<BitDropdown Label=""Single select""
+             DefaultValue=""@string.Empty""
              Placeholder=""Select an item""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
     @foreach (var item in basicItems)
@@ -935,86 +1247,188 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     }
 </BitDropdown>
 
-<BitDropdown Label=""Clear button icon (external)""
-             ShowClearButton
-             ClearButtonIcon=""@BitIconInfo.Css(""fa-solid fa-circle-xmark"")""
-             Placeholder=""Select an item""
+<BitDropdown Label=""Multi select""
+             MultiSelect
+             Placeholder=""Select items""
+             DefaultValue=""@string.Empty""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
-</BitDropdown>
+</BitDropdown>";
+    private readonly string example18CsharpCode = @"
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
 
-<BitDropdown Label=""Chips remove icon (external)""
-             Chips
+    private readonly string example19RazorCode = @"
+<BitDropdown @bind-Values=""selectAllValues""
              MultiSelect
-             ChipsRemoveIcon=""@BitIconInfo.Css(""bi bi-x-circle"")""
+             ShowSelectAll
              Placeholder=""Select items""
+             Label=""Select all""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
+<div>Values: @string.Join(',', selectAllValues)</div>
 
-<BitDropdown Label=""Search box icons (external)""
+<BitDropdown MultiSelect
+             ShowSelectAll
              ShowSearchBox
-             SearchBoxIcon=""@BitIconInfo.Css(""fa-solid fa-magnifying-glass"")""
-             SearchBoxClearIcon=""@BitIconInfo.Css(""fa-solid fa-circle-xmark"")""
-             Placeholder=""Select an item""
+             SelectAllText=""Select all of them""
+             Placeholder=""Select items""
+             DefaultValue=""@string.Empty""
+             SearchBoxPlaceholder=""Search items""
+             Label=""Custom text & search""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>";
+    private readonly string example19CsharpCode = @"
+private IEnumerable<string?> selectAllValues = [];
+
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
+
+    private readonly string example20RazorCode = @"
+<BitDropdown @bind-Values=""maxSelectedValues""
+             MultiSelect
+             MaxSelectedItems=""2""
+             Placeholder=""Select up to 2 items""
+             Label=""Max 2 items""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
     @foreach (var item in basicItems)
     {
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>
+<div>Values: @string.Join(',', maxSelectedValues)</div>";
+    private readonly string example20CsharpCode = @"
+private IEnumerable<string?> maxSelectedValues = [];
 
-<BitDropdown Label=""Item icons (IconName - Fluent UI)""
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
+
+    private readonly string example21RazorCode = @"
+<style>
+    .custom-drp {
+        gap: 10px;
+        display: flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+    }
+
+    .custom-drp.custom-drp-empty {
+        color: orangered;
+        padding: 5px 12px;
+        justify-content: center;
+    }
+</style>
+
+<BitDropdown Label=""Default""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"" />
+
+<BitDropdown Label=""EmptyText""
+             Placeholder=""Select an item""
+             EmptyText=""There is nothing here!""
+             TItem=""BitDropdownOption<string>"" TValue=""string"" />
+
+<BitDropdown Label=""EmptyTemplate""
              Placeholder=""Select an item""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
-    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Fruits"" Value=""@string.Empty"" />
-    <BitDropdownOption Text=""Apple"" Value=""@(""f-app"")"" IconName=""@BitIconName.AllApps"" />
-    <BitDropdownOption Text=""Banana"" Value=""@(""f-ban"")"" IconName=""@BitIconName.Calculator"" />
-    <BitDropdownOption Text=""Orange"" Value=""@(""f-ora"")"" IconName=""@BitIconName.FavoriteStar"" IsEnabled=""false"" />
-    <BitDropdownOption Text=""Grape"" Value=""@(""f-gra"")"" IconName=""@BitIconName.Edit"" />
-    <BitDropdownOption ItemType=""BitDropdownItemType.Divider"" Value=""@string.Empty"" />
-    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Vegetables"" Value=""@string.Empty"" />
-    <BitDropdownOption Text=""Broccoli"" Value=""@(""v-bro"")"" IconName=""@BitIconName.Health"" />
-    <BitDropdownOption Text=""Carrot"" Value=""@(""v-car"")"" IconName=""@BitIconName.Add"" />
-    <BitDropdownOption Text=""Lettuce"" Value=""@(""v-let"")"" IconName=""@BitIconName.ChevronDown"" />
+    <EmptyTemplate>
+        <div class=""custom-drp custom-drp-empty"">
+            <BitIcon IconName=""@BitIconName.SearchIssue"" />
+            <div>Nothing to show!</div>
+        </div>
+    </EmptyTemplate>
 </BitDropdown>
 
-<BitDropdown Label=""Item icons (Icon - FontAwesome)""
+<BitDropdown Label=""Search without result""
+             ShowSearchBox
+             DefaultValue=""@string.Empty""
              Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search for anything""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
-    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Fruits"" Value=""@string.Empty"" />
-    <BitDropdownOption Text=""Apple"" Value=""@(""f-app"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-apple-whole"")"" />
-    <BitDropdownOption Text=""Banana"" Value=""@(""f-ban"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-moon"")"" />
-    <BitDropdownOption Text=""Orange"" Value=""@(""f-ora"")"" Icon=""@BitIconInfo.Fa(""solid lemon"")"" IsEnabled=""false"" />
-    <BitDropdownOption Text=""Grape"" Value=""@(""f-gra"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-droplet"")"" />
-    <BitDropdownOption ItemType=""BitDropdownItemType.Divider"" Value=""@string.Empty"" />
-    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Vegetables"" Value=""@string.Empty"" />
-    <BitDropdownOption Text=""Broccoli"" Value=""@(""v-bro"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-seedling"")"" />
-    <BitDropdownOption Text=""Carrot"" Value=""@(""v-car"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-carrot"")"" />
-    <BitDropdownOption Text=""Lettuce"" Value=""@(""v-let"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-leaf"")"" />
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
 </BitDropdown>
 
-<BitDropdown Label=""Item icons (Icon - Bootstrap Icons)""
+<BitDropdown Label=""NoResultsText""
+             ShowSearchBox
+             DefaultValue=""@string.Empty""
              Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search for anything""
+             NoResultsText=""Nothing matched your search""
              TItem=""BitDropdownOption<string>"" TValue=""string"">
-    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Fruits"" Value=""@string.Empty"" />
-    <BitDropdownOption Text=""Apple"" Value=""@(""f-app"")"" Icon=""@BitIconInfo.Bi(""apple"")"" />
-    <BitDropdownOption Text=""Banana"" Value=""@(""f-ban"")"" Icon=""@BitIconInfo.Bi(""flower1"")"" />
-    <BitDropdownOption Text=""Orange"" Value=""@(""f-ora"")"" Icon=""@BitIconInfo.Css(""bi bi-sun"")"" IsEnabled=""false"" />
-    <BitDropdownOption Text=""Grape"" Value=""@(""f-gra"")"" Icon=""@BitIconInfo.Bi(""droplet-fill"")"" />
-    <BitDropdownOption ItemType=""BitDropdownItemType.Divider"" Value=""@string.Empty"" />
-    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Vegetables"" Value=""@string.Empty"" />
-    <BitDropdownOption Text=""Broccoli"" Value=""@(""v-bro"")"" Icon=""@BitIconInfo.Bi(""tree-fill"")"" />
-    <BitDropdownOption Text=""Carrot"" Value=""@(""v-car"")"" Icon=""@BitIconInfo.Bi(""egg"")"" />
-    <BitDropdownOption Text=""Lettuce"" Value=""@(""v-let"")"" Icon=""@BitIconInfo.Bi(""flower2"")"" />
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""NoResultsTemplate""
+             ShowSearchBox
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             SearchBoxPlaceholder=""Search for anything""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    <NoResultsTemplate>
+        <div class=""custom-drp custom-drp-empty"">
+            <BitIcon IconName=""@BitIconName.SearchAndApps"" />
+            <div>No match. Try another term!</div>
+        </div>
+    </NoResultsTemplate>
+    <Options>
+        @foreach (var item in basicItems)
+        {
+            <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+        }
+    </Options>
 </BitDropdown>";
-    private readonly string example16CsharpCode = @"
+    private readonly string example21CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1029,7 +1443,109 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example17RazorCode = @"
+    private readonly string example22RazorCode = @"
+<style>
+    .custom-drp {
+        gap: 10px;
+        display: flex;
+        align-items: center;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+    }
+
+    .custom-drp.custom-drp-empty {
+        color: orangered;
+        padding: 5px 12px;
+        justify-content: center;
+    }
+</style>
+
+<BitDropdown Label=""IsLoading""
+             IsLoading
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""LoadingText""
+             IsLoading
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             LoadingText=""Fetching the products...""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""LoadingTemplate""
+             IsLoading
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    <LoadingTemplate>
+        <div class=""custom-drp custom-drp-empty"">
+            <BitIcon IconName=""@BitIconName.Sync"" />
+            <div>Just a moment...</div>
+        </div>
+    </LoadingTemplate>
+    <Options>
+        @foreach (var item in basicItems)
+        {
+            <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+        }
+    </Options>
+</BitDropdown>
+
+<BitButton OnClick=""LoadDelayedItems"" IsLoading=""isLoadingItems"">Load the items</BitButton>
+<BitDropdown Label=""Products""
+             IsLoading=""isLoadingItems""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in delayedItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>";
+    private readonly string example22CsharpCode = @"
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];
+
+private bool isLoadingItems;
+private List<BitDropdownItem<string>> delayedItems = [];
+
+private async Task LoadDelayedItems()
+{
+    isLoadingItems = true;
+    delayedItems = [];
+
+    await Task.Delay(2000);
+
+    delayedItems = [.. basicItems];
+    isLoadingItems = false;
+}";
+
+    private readonly string? example23RazorCode = @"
+<div>Not applicable to option demo!</div>";
+
+    private readonly string example24RazorCode = @"
 <BitDropdown Label=""Primary""
              MultiSelect
              Color=""BitColor.Primary""
@@ -1117,7 +1633,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>";
-    private readonly string example17CsharpCode = @"
+    private readonly string example24CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1132,7 +1648,179 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"" }
 ];";
 
-    private readonly string example18RazorCode = @"
+    private readonly string example25RazorCode = @"
+<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
+<link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
+
+<BitDropdown Label=""Caret down icon (external)""
+             CaretDownIcon=""@BitIconInfo.Css(""fa-solid fa-circle-chevron-down"")""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Clear button icon (external)""
+             ShowClearButton
+             ClearButtonIcon=""@BitIconInfo.Css(""fa-solid fa-circle-xmark"")""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Chips remove icon (external)""
+             Chips
+             MultiSelect
+             ChipsRemoveIcon=""@BitIconInfo.Css(""bi bi-x-circle"")""
+             DefaultValues=""@(Array.Empty<string>())""
+             Placeholder=""Select items""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Search box icons (external)""
+             ShowSearchBox
+             SearchBoxIcon=""@BitIconInfo.Css(""fa-solid fa-magnifying-glass"")""
+             SearchBoxClearIcon=""@BitIconInfo.Css(""fa-solid fa-circle-xmark"")""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Item check icon (external)""
+             MultiSelect
+             ItemCheckIcon=""@BitIconInfo.Css(""fa-solid fa-heart"")""
+             DefaultValues=""@(Array.Empty<string>())""
+             Placeholder=""Select items""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Item icons (IconName - Fluent UI)""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Fruits"" Value=""@string.Empty"" />
+    <BitDropdownOption Text=""Apple"" Value=""@(""f-app"")"" IconName=""@BitIconName.AllApps"" />
+    <BitDropdownOption Text=""Banana"" Value=""@(""f-ban"")"" IconName=""@BitIconName.Calculator"" />
+    <BitDropdownOption Text=""Orange"" Value=""@(""f-ora"")"" IconName=""@BitIconName.FavoriteStar"" IsEnabled=""false"" />
+    <BitDropdownOption Text=""Grape"" Value=""@(""f-gra"")"" IconName=""@BitIconName.Edit"" />
+    <BitDropdownOption ItemType=""BitDropdownItemType.Divider"" Value=""@string.Empty"" />
+    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Vegetables"" Value=""@string.Empty"" />
+    <BitDropdownOption Text=""Broccoli"" Value=""@(""v-bro"")"" IconName=""@BitIconName.Health"" />
+    <BitDropdownOption Text=""Carrot"" Value=""@(""v-car"")"" IconName=""@BitIconName.Add"" />
+    <BitDropdownOption Text=""Lettuce"" Value=""@(""v-let"")"" IconName=""@BitIconName.ChevronDown"" />
+</BitDropdown>
+
+<BitDropdown Label=""Item icons (Icon - FontAwesome)""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Fruits"" Value=""@string.Empty"" />
+    <BitDropdownOption Text=""Apple"" Value=""@(""f-app"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-apple-whole"")"" />
+    <BitDropdownOption Text=""Banana"" Value=""@(""f-ban"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-moon"")"" />
+    <BitDropdownOption Text=""Orange"" Value=""@(""f-ora"")"" Icon=""@BitIconInfo.Fa(""solid lemon"")"" IsEnabled=""false"" />
+    <BitDropdownOption Text=""Grape"" Value=""@(""f-gra"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-droplet"")"" />
+    <BitDropdownOption ItemType=""BitDropdownItemType.Divider"" Value=""@string.Empty"" />
+    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Vegetables"" Value=""@string.Empty"" />
+    <BitDropdownOption Text=""Broccoli"" Value=""@(""v-bro"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-seedling"")"" />
+    <BitDropdownOption Text=""Carrot"" Value=""@(""v-car"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-carrot"")"" />
+    <BitDropdownOption Text=""Lettuce"" Value=""@(""v-let"")"" Icon=""@BitIconInfo.Css(""fa-solid fa-leaf"")"" />
+</BitDropdown>
+
+<BitDropdown Label=""Item icons (Icon - Bootstrap Icons)""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Fruits"" Value=""@string.Empty"" />
+    <BitDropdownOption Text=""Apple"" Value=""@(""f-app"")"" Icon=""@BitIconInfo.Bi(""apple"")"" />
+    <BitDropdownOption Text=""Banana"" Value=""@(""f-ban"")"" Icon=""@BitIconInfo.Bi(""flower1"")"" />
+    <BitDropdownOption Text=""Orange"" Value=""@(""f-ora"")"" Icon=""@BitIconInfo.Css(""bi bi-sun"")"" IsEnabled=""false"" />
+    <BitDropdownOption Text=""Grape"" Value=""@(""f-gra"")"" Icon=""@BitIconInfo.Bi(""droplet-fill"")"" />
+    <BitDropdownOption ItemType=""BitDropdownItemType.Divider"" Value=""@string.Empty"" />
+    <BitDropdownOption ItemType=""BitDropdownItemType.Header"" Text=""Vegetables"" Value=""@string.Empty"" />
+    <BitDropdownOption Text=""Broccoli"" Value=""@(""v-bro"")"" Icon=""@BitIconInfo.Bi(""tree-fill"")"" />
+    <BitDropdownOption Text=""Carrot"" Value=""@(""v-car"")"" Icon=""@BitIconInfo.Bi(""egg"")"" />
+    <BitDropdownOption Text=""Lettuce"" Value=""@(""v-let"")"" Icon=""@BitIconInfo.Bi(""flower2"")"" />
+</BitDropdown>";
+    private readonly string example25CsharpCode = @"
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
+
+    private readonly string example26RazorCode = @"
+<BitDropdown Label=""Small""
+             ShowSearchBox
+             Size=""BitSize.Small""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Medium""
+             ShowSearchBox
+             Size=""BitSize.Medium""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>
+
+<BitDropdown Label=""Large""
+             ShowSearchBox
+             Size=""BitSize.Large""
+             DefaultValue=""@string.Empty""
+             Placeholder=""Select an item""
+             TItem=""BitDropdownOption<string>"" TValue=""string"">
+    @foreach (var item in basicItems)
+    {
+        <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
+    }
+</BitDropdown>";
+    private readonly string example26CsharpCode = @"
+private readonly List<BitDropdownItem<string>> basicItems =
+[
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
+    new() { Text = ""Apple"", Value = ""f-app"" },
+    new() { Text = ""Banana"", Value = ""f-ban"" },
+    new() { Text = ""Orange"", Value = ""f-ora"", IsEnabled = false },
+    new() { Text = ""Grape"", Value = ""f-gra"" },
+    new() { ItemType = BitDropdownItemType.Divider },
+    new() { ItemType = BitDropdownItemType.Header, Text = ""Vegetables"" },
+    new() { Text = ""Broccoli"", Value = ""v-bro"" },
+    new() { Text = ""Carrot"", Value = ""v-car"" },
+    new() { Text = ""Lettuce"", Value = ""v-let"" }
+];";
+
+    private readonly string example27RazorCode = @"
 <style>
     .custom-class {
         margin-inline: 1rem;
@@ -1230,7 +1918,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>";
-    private readonly string example18CsharpCode = @"
+    private readonly string example27CsharpCode = @"
 private readonly List<BitDropdownItem<string>> basicItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""Fruits"" },
@@ -1259,7 +1947,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""Lettuce"", Value = ""v-let"", Class = ""custom-veg"" }
 ];";
 
-    private readonly string example19RazorCode = @"
+    private readonly string example28RazorCode = @"
 <BitDropdown Label=""تک انتخابی""
              Dir=""BitDir.Rtl""
              Placeholder=""لطفا انتخاب کنید""
@@ -1291,7 +1979,7 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
         <BitDropdownOption ItemType=""item.ItemType"" Text=""@item.Text"" Value=""item.Value"" IsEnabled=""item.IsEnabled"" />
     }
 </BitDropdown>";
-    private readonly string example19CsharpCode = @"
+    private readonly string example28CsharpCode = @"
 private readonly List<BitDropdownItem<string>> rtlItems =
 [
     new() { ItemType = BitDropdownItemType.Header, Text = ""میوه ها"" },
@@ -1305,7 +1993,4 @@ private void HandleOnDynamicAdd(BitDropdownOption<string> item)
     new() { Text = ""هویج"", Value = ""v-car"" },
     new() { Text = ""کاهو"", Value = ""v-let"" }
 ];";
-
-    private readonly string? example20RazorCode = @"
-<div>Not applicable to option demo!</div>";
 }
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownTests.cs
index f01a3a3e33..cbea505f29 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Dropdown/BitDropdownTests.cs
@@ -1165,7 +1165,7 @@ public void BitDropdownChipsRemoveIconNameTest(string? iconName)
             }
         });
 
-        var chipIcon = component.Find(".bit-drp-chp > i");
+        var chipIcon = component.Find(".bit-drp-chp > .bit-drp-crb > i");
 
         if (iconName is not null)
         {