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.

Notes

The BitDropdown is a
Multi-API
component which can accept the list of Items in 3 different ways:
1. The
BitDropdownItem
class
2. A
Custom Generic
class
3. The
BitDropdownOption
component

ForceAnimation (whole page)

Introduction

Music: Music Cocktails, Musician: AlexGuz, URL: https://open.spotify.com/artist/1u0Nlnljg2xGHJV6X7W4i1

Usage

Basic

<BitDropdown Label="Single select"
             Items="GetBasicItems()"
             Placeholder="Select an item"
             TItem="BitDropdownItem<string>" TValue="string" />

<BitDropdown Label="Multi select"
             MultiSelect
             DefaultValue="@("")"
             Items="GetBasicItems()"
             Placeholder="Select items" />

<BitDropdown Label="Required" Required
             Items="GetBasicItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item" />

<BitDropdown Label="PreserveCalloutWidth"
             PreserveCalloutWidth
             Items="GetBasicItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item" />

<BitDropdown Label="Disabled"
             IsEnabled="false"
             Items="GetBasicItems()"
             DefaultValue="@("f-ora")"
             Placeholder="Select an item" />
@code {
    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" }
    };
}

Displays basic dropdowns demonstrating single and multi-select options, including required and disabled states.

Prefix & Suffix

<BitDropdown Label="Prefix"
             Prefix="Fruits:"
             Items="GetBasicItems()"
             Placeholder="Select an item"
             TItem="BitDropdownItem<string>"
             TValue="string" />

<BitDropdown Label="Suffix"
             Suffix="kg"
             Items="GetBasicItems()"
             Placeholder="Select an item"
             TItem="BitDropdownItem<string>"
             TValue="string" />

<BitDropdown Label="Prefix and Suffix"
             Prefix="Fruits:"
             Suffix="kg"
             Items="GetBasicItems()"
             Placeholder="Select an item"
             TItem="BitDropdownItem<string>"
             TValue="string" />

<BitDropdown Label="Disabled"
             Prefix="Fruits:"
             Suffix="kg"
             Items="GetBasicItems()"
             Placeholder="Select an item"
             TItem="BitDropdownItem<string>"
             TValue="string"
             IsEnabled="false" />
@code {
    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" }
    };
}

Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.

FitWidth

<BitDropdown Label="Single select" 
             FitWidth
             Items="GetBasicItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item" />

<BitDropdown Label="Multi select"
             FitWidth
             MultiSelect
             Items="GetBasicItems()"
             Placeholder="Select items"
             DefaultValue="@string.Empty" />
@code {
    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" }
    };
}

Enables fit-content width for the dropdown that sets the width of the component based on its content size.

NoBorder

<BitDropdown NoBorder
             Items="GetBasicItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item" />

<BitDropdown NoBorder
             MultiSelect
             Items="GetBasicItems()"
             Placeholder="Select items"
             DefaultValue="@string.Empty" />
@code {
    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" }
    };
}

The dropdown can be rendered without any border.

Responsive

<BitDropdown Label="Responsive Dropdown"
             Responsive
             Items="GetBasicItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item" />
@code {
    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" }
    };
}

When the IsResponsive parameter is true, on small screens the drop down items will render in a side panel.

Drop direction

<BitDropdown Label="All"
             Items="dropDirectionItems"
             DefaultValue="@string.Empty"
             Placeholder="Select an item"
             DropDirection="BitDropDirection.All" />

<BitDropdown Label="TopAndBottom"
             Items="dropDirectionItems"
             DefaultValue="@string.Empty"
             Placeholder="Select an item"
             DropDirection="BitDropDirection.TopAndBottom" />
@code {
    private ICollection<BitDropdownItem<string>>? dropDirectionItems;
    
    protected override void OnInitialized()
    {
            dropDirectionItems = Enumerable.Range(1, 15)
                                           .Select(c => new BitDropdownItem<string> { Value = c.ToString(), Text = $"Category {c}" })
                                           .ToArray();
    }
}

Explores different drop directions for the BitDropdown component, including automatic and explicit directions.

Clear button

<BitDropdown @bind-Value="clearValue"
             ShowClearButton
             Items="GetBasicItems()"
             Label="Single select dropdown"
             Placeholder="Select an option" />
<div>Value: @clearValue</div>

<BitDropdown @bind-Values="clearValues"
             MultiSelect
             ShowClearButton
             Items="GetBasicItems()"
             Placeholder="Select options"
             Label="Multi select dropdown" />
<div>Values: @string.Join(',', clearValues)</div>
@code {
    private string? clearValue = "f-app";
    private ICollection<string?> clearValues = new[] { "f-app", "f-ban" };
    
    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" }
    };
}

Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.

Value: f-app

Values: f-app,f-ban

SearchBox

<BitDropdown Label="Single select & auto focus"
             Responsive
             ShowSearchBox
             AutoFocusSearchBox
             Items="GetBasicItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item"
             SearchBoxPlaceholder="Search item" />

<BitDropdown Label="Multi select"
             Responsive
             MultiSelect
             ShowSearchBox
             Items="GetBasicItems()"
             Placeholder="Select items"
             DefaultValue="@string.Empty"
             SearchBoxPlaceholder="Search items" />


<BitDropdown Label="Single select & auto focus"
             Responsive
             ShowSearchBox
             AutoFocusSearchBox
             Items="GetBasicItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item"
             SearchBoxPlaceholder="Search item"
             SearchFunction="(items, text) => items.Where(i => i.Text?.StartsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()" />

<BitDropdown Label="Multi select"
             Responsive
             MultiSelect
             ShowSearchBox
             Items="GetBasicItems()"
             Placeholder="Select items"
             DefaultValue="@string.Empty"
             SearchBoxPlaceholder="Search items"
             SearchFunction="(items, text) => items.Where(i => i.Text?.EndsWith(text, StringComparison.OrdinalIgnoreCase) ?? false).ToArray()" />
@code {
    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" }
    };
}

Examples of dropdowns with search functionality, including default and custom search functions.

Custom search function:

Immediate search

<BitDropdown Label="Immediate"
             ShowSearchBox
             Immediate
             Items="GetBasicItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item"
             SearchBoxPlaceholder="Search item"
             OnSearch="v => immediateSearchValue = v" />
<div>Search value: <b>@immediateSearchValue</b></div>

<BitDropdown Label="Immediate + DebounceTime (500ms)"
             ShowSearchBox
             Immediate
             DebounceTime="500"
             Items="GetBasicItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item"
             SearchBoxPlaceholder="Search item"
             OnSearch="v => debouncedSearchValue = v" />
<div>Search value: <b>@debouncedSearchValue</b></div>

<BitDropdown Label="Immediate ComboBox + ThrottleTime (500ms)"
             Combo
             Immediate
             ThrottleTime="500"
             Items="comboBoxItems"
             DefaultValue="@string.Empty"
             Placeholder="Select an item" />
@code {
    private string? immediateSearchValue;
    private string? debouncedSearchValue;
    
    private 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 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" }
    };
}

By default, the search and combo box inputs raise their search as you commit the input (on the change event). Enabling Immediate makes the search happen as you type (on the input event). You can also rate-limit the immediate search using DebounceTime or ThrottleTime (in milliseconds).

Search value:

Validation

@using System.ComponentModel.DataAnnotations;

<style>
    .validation-message {
        color: #A4262C;
        font-size: 0.75rem;
    }
</style>

<EditForm Model="validationModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
    <DataAnnotationsValidator />

    <BitDropdown @bind-Value="validationModel.Category"
                 Label="Select 1 item"
                 Items="GetBasicItems()"
                 Placeholder="Select an item" />
    <ValidationMessage For="@(() => validationModel.Category)" />

    <BitDropdown @bind-Values="validationModel.Products"
                 MultiSelect
                 Items="GetBasicItems()"
                 Placeholder="Select items"
                 Label="Select min 1 and max 2 items" />
    <ValidationMessage For="@(() => validationModel.Products)" />

    <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
</EditForm>
@code {
    public class FormValidationDropdownModel
    {
        [MaxLength(2, ErrorMessage = "The property {0} have more than {1} elements")]
        [MinLength(1, ErrorMessage = "The property {0} doesn't have at least {1} elements")]
        public ICollection<string?> Products { get; set; } = new List<string?>();
    
        [Required]
        public string Category { get; set; }
    }
    
    private FormValidationDropdownModel validationModel = new();
    
    private async Task HandleValidSubmit() { }
    
    private void HandleInvalidSubmit() { }
    
    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" }
    };
}

Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.

Customization

<style>
    .custom-drp {
        gap: 10px;
        display: flex;
        align-items: center;
        flex-flow: row nowrap;
        justify-content: flex-start;
    }

    .custom-drp.custom-drp-lbl {
        color: dodgerblue;
    }

    .custom-drp.custom-drp-txt {
        color: goldenrod;
    }

    .custom-drp.custom-drp-ph {
        color: orangered;
    }

    .custom-drp.custom-drp-item {
        width: 100%;
        cursor: pointer;
    }

    .custom-drp.custom-drp-header {
        width: 100%;
        padding: 5px 12px;
        color: #ff4600;
        font-weight: bold;
    }
</style>

<BitDropdown Label="Header template"
             Items="GetDataItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item">
    <HeaderTemplate Context="item">
        <div class="custom-drp custom-drp-header">
            <BitIcon IconName="@((item.Data as DropdownItemData)?.IconName)" />
            <div>@item.Text</div>
        </div>
    </HeaderTemplate>
</BitDropdown>

<BitDropdown Label="Text & Item templates"
             Items="GetDataItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item">
    <TextTemplate Context="dropdown">
        <div class="custom-drp custom-drp-txt">
            <BitIcon IconName="@((dropdown.SelectedItem?.Data as DropdownItemData)?.IconName)" />
            <div>@dropdown.SelectedItem?.Text</div>
        </div>
    </TextTemplate>
    <ItemTemplate Context="item">
        <div class="custom-drp custom-drp-item">
            <BitIcon IconName="@((item.Data as DropdownItemData)?.IconName)" />
            <div Style="text-decoration:underline">@item.Text</div>
        </div>
    </ItemTemplate>
</BitDropdown>

<BitDropdown Label="Placeholder template"
             Items="GetDataItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item">
    <PlaceholderTemplate Context="dropdown">
        <div class="custom-drp custom-drp-ph">
            <BitIcon IconName="@BitIconName.MessageFill" />
            <div>@dropdown.Placeholder</div>
        </div>
    </PlaceholderTemplate>
</BitDropdown>

<BitDropdown Label="Label template"
             Items="GetDataItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item">
    <LabelTemplate>
        <div class="custom-drp custom-drp-lbl">
            <div>Custom label</div>
            <BitIcon IconName="@BitIconName.Info" AriaLabel="Info" />
        </div>
    </LabelTemplate>
</BitDropdown>

<BitDropdown Label="CaretDownIconName"
             Items="GetDataItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item"
             CaretDownIconName="@BitIconName.ScrollUpDown" />

<BitDropdown Label="Callout templates"
             Items="GetBasicItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item">
    <CalloutHeaderTemplate>
        <div Style="padding:0.5rem;border-bottom:1px solid #555">Best in the world</div>
    </CalloutHeaderTemplate>
    <CalloutFooterTemplate>
        <BitActionButton IconName="@BitIconName.Add">New Item</BitActionButton>
    </CalloutFooterTemplate>
</BitDropdown>
@code {
    public class DropdownItemData
    {
        public string? IconName { get; set; }
    }
    
    private List<BitDropdownItem<string>> GetDataItems() =>  new()
    {
        new() { ItemType = BitDropdownItemType.Header, Text = "Items", Data = new DropdownItemData { IconName = "BulletedList2" } },
        new() { Text = "Item a", Value = "A", Data = new DropdownItemData { IconName = "Memo" } },
        new() { Text = "Item b", Value = "B", Data = new DropdownItemData { IconName = "Print" } },
        new() { Text = "Item c", Value = "C", Data = new DropdownItemData { IconName = "ShoppingCart" } },
        new() { ItemType = BitDropdownItemType.Divider },
        new() { ItemType = BitDropdownItemType.Header, Text = "More Items", Data = new DropdownItemData { IconName = "BulletedTreeList" } },
        new() { Text = "Item d", Value = "D", Data = new DropdownItemData { IconName = "Train" } },
        new() { Text = "Item e", Value = "E", Data = new DropdownItemData { IconName = "Repair" } },
        new() { Text = "Item f", Value = "F", Data = new DropdownItemData { IconName = "Running" } }
    };
}

Shows how to customize dropdowns using templates for header, text, item, placeholder, label, and callout sections.

Binding

<BitDropdown @bind-Value="controlledValue"
             Label="Single select"
             Items="GetBasicItems()"
             Placeholder="Select an item" />
<div>Selected Value: @controlledValue</div>

<BitDropdown @bind-Values="controlledValues"
             MultiSelect
             Label="Multi select"
             Items="GetBasicItems()"
             Placeholder="Select items" />
<div>Selected Values: @string.Join(",", controlledValues)</div>



<BitDropdown Label="Single select"
             Items="GetBasicItems()"
             Placeholder="Select an item"
             TItem="BitDropdownItem<string>" TValue="string"
             OnChange="(string value) => changedValue = value" />
<div>Changed Value: @changedValue</div>
            
<BitDropdown Label="Multi select"
             MultiSelect
             Items="GetBasicItems()"
             Placeholder="Select items"
             TItem="BitDropdownItem<string>" TValue="string"
             OnValuesChange="(IEnumerable<string> values) => changedValues = values" />
<div>Changed Values: @string.Join(",", changedValues)</div>



<BitDropdown Label="Single select"
             Items="GetBasicItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item"
             OnSelectItem="(BitDropdownItem<string> item) => selectedItem1 = item" />
<div>Selected Value: @selectedItem1?.Value</div>

<BitDropdown Label="Multi select"
             MultiSelect
             Items="GetBasicItems()"
             Placeholder="Select items"
             DefaultValue="@string.Empty"
             OnSelectItem="(BitDropdownItem<string> item) => selectedItem2 = item" />
<div>Selected Value: @selectedItem2?.Value</div>
@code {
    private string controlledValue = "f-app";
    private IEnumerable<string> controlledValues = ["f-app", "f-ban"];
    
    private string? changedValue;
    private IEnumerable<string> changedValues = [];
    
    private BitDropdownItem<string>? selectedItem1;
    private BitDropdownItem<string>? selectedItem2;
    
    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" }
    };
}

Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.

Two-way binding:

Selected Value: f-app

Selected Values: f-app,f-ban

OnChange:

Changed Value:

Changed Values:

OnSelectItem:

Selected Value:

ComboBox

<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
             MultiSelect
             Items="comboBoxItems" 
             Label="Multi select combo box"
             Placeholder="Select an option" />
<div>Values: @string.Join(',', comboBoxValues1)</div>
@code {
    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" }
    };
}

When the Combo parameter is true, you can type in BitDropdown input and search between items.

Value:

Values:

Chips

<BitDropdown @bind-Value="comboBoxValueSample2"
             Combo Chips
             Responsive
             Items="comboBoxItems" 
             Placeholder="Select an option"
             Label="Single select combo box & chips" />
<div>Value: @comboBoxValueSample2</div>

<BitDropdown @bind-Values="comboBoxValues2"
             Combo Chips 
             MultiSelect
             Responsive
             Items="comboBoxItems" 
             Placeholder="Select an option"
             Label="Multi select combo box & chips" />
<div>Values: @string.Join(',', comboBoxValues2)</div>
@code {
    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" }
    };
}

When the Chips parameter is true, shows the selected items like chips in the ComboBox.

Value:

Values:

Dynamic ComboBox

<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>
@code {
    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" }
    };
}

When the Dynamic parameter is true, you can add a new item in the ComboBox.

Value:

When the Combo, Chips and Dynamic parameters are true, you can add a new item in the ComboBox (pressing the enter key or touching the add button on the mobile).

Value:

Values:

External Icons

<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/[email protected]/font/bootstrap-icons.min.css" />

<BitDropdown Label="Caret down icon (external)"
             CaretDownIcon="@BitIconInfo.Css("fa-solid fa-circle-chevron-down")"
             Items="GetBasicItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item" />

<BitDropdown Label="Clear button icon (external)"
             ShowClearButton
             ClearButtonIcon="@BitIconInfo.Css("fa-solid fa-circle-xmark")"
             Items="GetBasicItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item" />

<BitDropdown Label="Chips remove icon (external)"
             Chips
             MultiSelect
             ChipsRemoveIcon="@BitIconInfo.Css("bi bi-x-circle")"
             Items="GetBasicItems()"
             DefaultValues="@(Array.Empty<string>())"
             Placeholder="Select items" />

<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" />

<BitDropdown Label="Item icons (IconName - Fluent UI)"
             Items="GetExternalIconItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item" />

<BitDropdown Label="Item icons (Icon - FontAwesome)"
             Items="GetExternalIconFaItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item" />

<BitDropdown Label="Item icons (Icon - Bootstrap Icons)"
             Items="GetExternalIconBiItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item" />
@code {
    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>> GetExternalIconItems() => new()
    {
        new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
        new() { Text = "Apple", Value = "f-app", IconName = nameof(BitIconName.AllApps) },
        new() { Text = "Banana", Value = "f-ban", IconName = nameof(BitIconName.Calculator) },
        new() { Text = "Orange", Value = "f-ora", IconName = nameof(BitIconName.FavoriteStar), IsEnabled = false },
        new() { Text = "Grape", Value = "f-gra", IconName = nameof(BitIconName.Edit) },
        new() { ItemType = BitDropdownItemType.Divider },
        new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
        new() { Text = "Broccoli", Value = "v-bro", IconName = nameof(BitIconName.Health) },
        new() { Text = "Carrot", Value = "v-car", IconName = nameof(BitIconName.Add) },
        new() { Text = "Lettuce", Value = "v-let", IconName = nameof(BitIconName.ChevronDown) }
    };
    
    private List<BitDropdownItem<string>> GetExternalIconFaItems() => new()
    {
        new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
        new() { Text = "Apple", Value = "f-app", Icon = BitIconInfo.Css("fa-solid fa-apple-whole") },
        new() { Text = "Banana", Value = "f-ban", Icon = BitIconInfo.Css("fa-solid fa-moon") },
        new() { Text = "Orange", Value = "f-ora", Icon = BitIconInfo.Fa("solid lemon"), IsEnabled = false },
        new() { Text = "Grape", Value = "f-gra", Icon = BitIconInfo.Css("fa-solid fa-droplet") },
        new() { ItemType = BitDropdownItemType.Divider },
        new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
        new() { Text = "Broccoli", Value = "v-bro", Icon = BitIconInfo.Css("fa-solid fa-seedling") },
        new() { Text = "Carrot", Value = "v-car", Icon = BitIconInfo.Css("fa-solid fa-carrot") },
        new() { Text = "Lettuce", Value = "v-let", Icon = BitIconInfo.Css("fa-solid fa-leaf") }
    };
    
    private List<BitDropdownItem<string>> GetExternalIconBiItems() => new()
    {
        new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
        new() { Text = "Apple", Value = "f-app", Icon = BitIconInfo.Bi("apple") },
        new() { Text = "Banana", Value = "f-ban", Icon = BitIconInfo.Bi("flower1") },
        new() { Text = "Orange", Value = "f-ora", Icon = BitIconInfo.Css("bi bi-sun"), IsEnabled = false },
        new() { Text = "Grape", Value = "f-gra", Icon = BitIconInfo.Bi("droplet-fill") },
        new() { ItemType = BitDropdownItemType.Divider },
        new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
        new() { Text = "Broccoli", Value = "v-bro", Icon = BitIconInfo.Bi("tree-fill") },
        new() { Text = "Carrot", Value = "v-car", Icon = BitIconInfo.Bi("egg") },
        new() { Text = "Lettuce", Value = "v-let", Icon = BitIconInfo.Bi("flower2") }
    };
}

Use icons from external libraries like FontAwesome and Bootstrap Icons with the CaretDownIcon, ClearButtonIcon, ChipsRemoveIcon, SearchBoxIcon, SearchBoxClearIcon, and ResponsiveCloseIcon parameters on the dropdown and the Icon or IconName properties on BitDropdownItem.

Color

<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
             ShowSearchBox
             DefaultValue="@("")"
             Items="GetBasicItems()"
             Color="BitColor.Warning"
             Placeholder="Select items" />

<BitDropdown Label="SevereWarning"
             MultiSelect
             ShowSearchBox
             DefaultValue="@("")"
             Items="GetBasicItems()"
             Color="BitColor.SevereWarning"
             Placeholder="Select items" />

<BitDropdown Label="Error"
             MultiSelect
             ShowSearchBox
             DefaultValue="@("")"
             Items="GetBasicItems()"
             Color="BitColor.Error"
             Placeholder="Select items" />
@code {
    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" }
    };
}

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

Style & Class

<style>
    .custom-class {
        margin-inline: 1rem;
        box-shadow: dodgerblue 0 0 0.5rem;
        text-shadow: dodgerblue 0 0 0.5rem;
    }


    .custom-fruit {
        background-color: #a5104457;
    }

    .custom-veg {
        background-color: #1c73324d;
    }


    .custom-callout {
        border-radius: 1rem;
        border-color: lightgray;
        backdrop-filter: blur(20px);
        background-color: transparent;
        box-shadow: darkgray 0 0 0.5rem;
    }

    .custom-container, .custom-container::after {
        border-radius: 1rem;
    }

    .custom-item-button {
        border-bottom: 1px solid gray;
    }

    .custom-item-button:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .custom-scroll-container div:last-child .custom-item-button {
        border-bottom: none;
    }
</style>


<BitDropdown Items="GetBasicItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item"
             Style="margin: 1rem; box-shadow: aqua 0 0 0.5rem; text-shadow: aqua 0 0 0.5rem;" />

<BitDropdown Class="custom-class" 
             Items="GetBasicItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item" />


<BitDropdown Items="GetStyleClassItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item" />


<BitDropdown Label="Styles"
             Items="GetBasicItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item"
             Styles="@(new() { Label = "text-shadow: dodgerblue 0 0 0.5rem;",
                               Container = "box-shadow: dodgerblue 0 0 0.5rem; border-color: lightskyblue; color: lightskyblue;",
                               ItemHeader = "color: dodgerblue; text-shadow: dodgerblue 0 0 0.5rem;",
                               ItemButton = "color: lightskyblue",
                               Callout = "border-radius: 0.25rem; box-shadow: lightskyblue 0 0 0.5rem;" })" />

<BitDropdown Label="Classes"
             Items="GetBasicItems()"
             DefaultValue="@string.Empty"
             Placeholder="Select an item"
             Classes="@(new() { Callout = "custom-callout",
                                Container = "custom-container",
                                ItemButton = "custom-item-button",
                                ScrollContainer = "custom-scroll-container" })" />
@code {
    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>> GetStyleClassItems() => new()
    {
        new() { ItemType = BitDropdownItemType.Header, Text = "Fruits", Style = "text-align: center;" },
        new() { Text = "Apple", Value = "f-app", Class = "custom-fruit" },
        new() { Text = "Banana", Value = "f-ban", Class = "custom-fruit" },
        new() { Text = "Orange", Value = "f-ora", IsEnabled = false, Class = "custom-fruit" },
        new() { Text = "Grape", Value = "f-gra", Class = "custom-fruit" },
        new() { ItemType = BitDropdownItemType.Divider, Style = "padding: 0 0.25rem;" },
        new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables", Style = "text-align: center;" },
        new() { Text = "Broccoli", Value = "v-bro", Class = "custom-veg" },
        new() { Text = "Carrot", Value = "v-car", Class = "custom-veg" },
        new() { Text = "Lettuce", Value = "v-let", Class = "custom-veg" }
    };
}

Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.

Component's Style & Class:

Item's Style & Class:

Styles & Classes:

RTL

<BitDropdown Label="تک انتخابی"
             Items="GetRtlItems()"
             DefaultValue="@string.Empty"
             Placeholder="لطفا انتخاب کنید"
             Dir="BitDir.Rtl" />

<BitDropdown Label="چند انتخابی"
             MultiSelect
             Dir="BitDir.Rtl"
             Items="GetRtlItems()"
             DefaultValue="@string.Empty"
             Placeholder="انتخاب چند گزینه ای" />

<BitDropdown Label="تک انتخابی ریسپانسیو"
             Responsive
             Dir="BitDir.Rtl"
             Items="GetRtlItems()"
             DefaultValue="@string.Empty"
             Placeholder="لطفا انتخاب کنید" />
@code {
    private List<BitDropdownItem<string>> GetRtlItems() => new()
    {
        new() { ItemType = BitDropdownItemType.Header, Text = "میوه ها" },
        new() { Text = "سیب", Value = "f-app" },
        new() { Text = "موز", Value = "f-ban" },
        new() { Text = "پرتقال", Value = "f-ora", IsEnabled = false },
        new() { Text = "انگور", Value = "f-gra" },
        new() { ItemType = BitDropdownItemType.Divider },
        new() { ItemType = BitDropdownItemType.Header, Text = "سیزیجات" },
        new() { Text = "کلم بروكلی", Value = "v-bro" },
        new() { Text = "هویج", Value = "v-car" },
        new() { Text = "کاهو", Value = "v-let" }
    };
}

Use BitDropdown in right-to-left (RTL).

Virtualization

<BitDropdown Label="Single select"
             Virtualize
             Items="virtualizeItems1"
             DefaultValue="@string.Empty"
             Placeholder="Select an item" />

<BitDropdown Label="Multi select"
             Virtualize
             MultiSelect
             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="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" />
@code {
    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",
            Data = new ProductDto {
                Id = 99,
                Price = 75,
                Name = "Product 99"
            },
            AriaLabel = "Product 99",
            IsEnabled = true,
            ItemType = BitDropdownItemType.Normal
        }
    ];
    
    protected override void OnInitialized()
    {
        virtualizeItems1 = Enumerable.Range(1, 10_000)
                                     .Select(c => new BitDropdownItem<string> { Text = $"Category {c}", Value = c.ToString() })
                                     .ToArray();
    
        virtualizeItems2 = Enumerable.Range(1, 10_000)
                                     .Select(c => new BitDropdownItem<string> { Text = $"Category {c}", Value = c.ToString() })
                                     .ToArray();
    }
    
    private async ValueTask<BitDropdownItemsProviderResult<BitDropdownItem<string>>> LoadItems(
        BitDropdownItemsProviderRequest<BitDropdownItem<string>> 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 BitDropdownItem<string>
            {
                Text = i.Name,
                Value = i.Id.ToString(),
                Data = i,
                AriaLabel = i.Name,
                IsEnabled = true,
                ItemType = BitDropdownItemType.Normal
            }).ToList();
    
            return BitDropdownItemsProviderResult.From(items, data!.TotalCount);
        }
        catch
        {
            return BitDropdownItemsProviderResult.From(new List<BitDropdownItem<string>>(), 0);
        }
    }
}

Demonstrates virtualization in the BitDropdown component for handling large datasets efficiently.

With Items:

With ItemsProvider:

With ItemsProvider and InitialSelectedItems:

API

BitDropdown parameters

Name	Type	Default value	Description
AutoFocusSearchBox	bool	false	Enables auto-focusing of the SearchBox input when the callout is open.
CalloutFooterTemplate	RenderFragment?	null	Custom template to render as a footer in the callout.
CalloutHeaderTemplate	RenderFragment?	null	Custom template to render as a header in the callout.
CaretDownIcon	BitIconInfo?	null	The icon of the chevron down element. Takes precedence over CaretDownIconName when both are set. Use for external icon libraries (e.g. BitIconInfo.Fa("solid chevron-down"), BitIconInfo.Bi("chevron-down"), BitIconInfo.Css("my-class")).
CaretDownIconName	string?	null	The icon name of the chevron down element of the dropdown from the Fluent UI icon set.
CaretDownTemplate	RenderFragment?	null	The custom template for the chevron down element of the dropdown.
ChildContent	RenderFragment?	null	The content of the Dropdown, a list of BitDropdownOption components.
Chips	bool	false	Shows the selected items like chips in the BitDropdown.
ChipsRemoveIcon	BitIconInfo?	null	The icon of the remove button in the chips display. Takes precedence over ChipsRemoveIconName when both are set.
ChipsRemoveIconName	string?	null	The icon name of the remove button in the chips display from the Fluent UI icon set.
Classes	BitDropdownClassStyles?	null	Custom CSS classes for different parts of the BitDropdown.
Color	BitColor?	null	The general color of the dropdown.
ClearButtonIcon	BitIconInfo?	null	The icon of the clear button of the dropdown. Takes precedence over ClearButtonIconName when both are set.
ClearButtonIconName	string?	null	The icon name of the clear button of the dropdown from the Fluent UI icon set.
Combo	bool	false	Activates the ComboBox feature in BitDropDown component.
ComboBoxAddButtonIcon	BitIconInfo?	null	The icon of the add button in the responsive ComboBox mode. Takes precedence over ComboBoxAddButtonIconName when both are set.
ComboBoxAddButtonIconName	string?	null	The icon name of the add button in the responsive ComboBox mode from the Fluent UI icon set.
DefaultValues	IEnumerable<string?>?	null	The default values that will be initially used to set selected items in multi select mode if the Values parameter is not set.
DebounceTime	int	0	The debounce time in milliseconds for the search and combo box inputs (applied when Immediate is enabled).
DropDirection	BitDropDirection	BitDropDirection.TopAndBottom	Determines the allowed drop directions of the callout.
Dynamic	bool	false	It is allowed to add a new item in the ComboBox mode.
DynamicValueGenerator	Func<TItem?, TValue>?	null	The function for generating value in a custom item when a new item is on added Dynamic ComboBox mode.
ExistsSelectedItemFunction	Func<ICollection<TItem>, string, bool>		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.
FindItemFunction	Func<ICollection<TItem>, string, TItem>		Custom search function to be used in place of the default search algorithm for checking existing an item in items in the ComboBox mode.
FitWidth	bool	false	Enables fit-content value for the width of the root element.
HeaderTemplate	RenderFragment<TItem>?	null	The custom template for rendering the header items of the dropdown.
InitialSelectedItems	IEnumerable<TItem>?	null	The initial items that will be used to set selected items when using an ItemProvider.
Immediate	bool	false	Searches the items immediately as the user types in the search box or combo box input (based on the 'oninput' HTML event).
IsOpen	bool	false	Determines the opening state of the callout. (two-way bound)
ItemCheckIcon	BitIconInfo?	null	The icon of the check mark in the multi-select items. Takes precedence over ItemCheckIconName when both are set.
ItemCheckIconName	string?	null	The icon name of the check mark in the multi-select items from the Fluent UI icon set.
Items	ICollection<TItem>?	null	The list of items to display in the callout.
ItemSize	int	35	The height of each item in pixels for virtualization.
ItemsProvider	BitDropdownItemsProvider<TItem>?	null	The function providing items to the list for virtualization.
ItemTemplate	RenderFragment<TItem>?	null	The custom template for rendering the items of the dropdown.
Label	string?	null	The text of the label element of the dropdown.
LabelTemplate	RenderFragment?	null	The custom template for the label of the dropdown.
MultiSelect	bool	false	Enables the multi select mode.
MultiSelectDelimiter	string	,	The delimiter for joining the values to create the text of the dropdown in multi select mode.
NameSelectors	BitDropdownNameSelectors<TItem, TValue>?	null	Names and selectors of the custom input type properties.
NoBorder	bool	false	Removes the border from the root element.
OnClick	EventCallback<MouseEventArgs>		The click callback for the dropdown.
OnDynamicAdd	EventCallback<string>		The callback that is called when a new item is on added Dynamic ComboBox mode.
OnSearch	EventCallback<string>		The callback that is called when the search value changes.
OnSelectItem	EventCallback<TItem>		The callback that called when an item gets selected.
OnValuesChange	EventCallback<IEnumerable<TValue?>>		The callback that called when selected items change.
Options	RenderFragment?	null	Alias of ChildContent.
OverscanCount	int	3	Determines how many additional items are rendered before and after the visible region.
Placeholder	string?	null	The placeholder text of the dropdown.
PlaceholderTemplate	RenderFragment<BitDropdown<TItem, TValue>>?	null	The custom template for the placeholder of the dropdown.
Prefix	string?	null	Prefix displayed before the dropdown contents. This is not included in the value. Ensure a descriptive label is present to assist screen readers, as the value does not include the prefix.
PrefixTemplate	RenderFragment?	null	Shows the custom prefix for dropdown.
PreserveCalloutWidth	bool	false	Disables automatic setting of the callout width and preserves its original width.
Reselectable	bool	false	Enables calling the select events when the same item is selected in single select mode.
Responsive	bool	false	Enables the responsive mode of the component for small screens.
ResponsiveCloseIcon	BitIconInfo?	null	The icon of the close button in the responsive mode callout. Takes precedence over ResponsiveCloseIconName when both are set.
ResponsiveCloseIconName	string?	null	The icon name of the close button in the responsive mode callout from the Fluent UI icon set.
SearchBoxClearIcon	BitIconInfo?	null	The icon of the clear icon in the SearchBox. Takes precedence over SearchBoxClearIconName when both are set.
SearchBoxClearIconName	string?	null	The icon name of the clear icon in the SearchBox from the Fluent UI icon set.
SearchBoxIcon	BitIconInfo?	null	The icon of the search icon in the SearchBox. Takes precedence over SearchBoxIconName when both are set.
SearchBoxIconName	string?	null	The icon name of the search icon in the SearchBox from the Fluent UI icon set.
SearchBoxPlaceholder	string?	null	The placeholder text of the SearchBox input.
SearchFunction	Func<ICollection<TItem>, string, ICollection<TItem>>?	null	Custom search function to be used in place of the default search algorithm.
ShowClearButton	bool	false	Shows the clear button when an item is selected.
ShowSearchBox	bool	false	Shows the SearchBox element in the callout.
Styles	BitDropdownClassStyles?	null	Custom CSS styles for different parts of the BitDropdown.
Suffix	string?	null	Suffix displayed after the dropdown contents. This is not included in the value. Ensure a descriptive label is present to assist screen readers, as the value does not include the suffix.
SuffixTemplate	RenderFragment?	null	Shows the custom suffix for dropdown.
TextTemplate	RenderFragment<<TItem, TValue>>?	null	The custom template for the text of the dropdown.
ThrottleTime	int	0	The throttle time in milliseconds for the search and combo box inputs (applied when Immediate is enabled).
Title	string?	null	The title to show when the mouse hovers over the dropdown.
Transparent	bool	false	Removes the default background color from the root element.
Values	IEnumerable<TValue?>?	null	The values of the selected items in multi select mode. (two-way bound)
Virtualize	bool	false	Enables virtualization to render only the visible items.
VirtualizePlaceholder	RenderFragment<PlaceholderContext>?	null	The template for items that have not yet been rendered in virtualization mode.

BitDropdown public members

Name	Type	Description
SelectedItems	IReadOnlyList<TItem>	A readonly list of the current selected items in multi-select mode.
SelectedItem	TItem?	The current selected item in single-select mode.
ComboInputElement	ElementReference	The ElementReference to the combo input element.
FocusComboInputAsync	ValueTask	Gives focus to the combo input element.
SearchInputElement	ElementReference	The ElementReference to the search input element.
FocusSearchInputAsync	ValueTask	Gives focus to the search input element.

BitInputBase parameters

Name	Type	Default value	Description
DefaultValue	TValue?	null	The default value of the input to be used in uncontrolled mode (i.e. when the Value is not bound), typically used alongside the OnChange callback.
DisplayName	string?	null	Gets or sets the display name for this field.
InputHtmlAttributes	IReadOnlyDictionary<string, object>?	null	Gets or sets a collection of additional attributes that will be applied to the created element.
Name	string?	null	Gets or sets the name of the element. Allows access by name from the associated form.
NoValidate	bool	false	Disables the validation of the input.
OnChange	EventCallback<TValue?>		Callback for when the input value changes.
ReadOnly	bool	false	Makes the input read-only.
Required	bool	false	Makes the input required.
Value	TValue?	null	Gets or sets the value of the input. This should be used with two-way binding.

BitInputBase public members

Name	Type	Description
InputElement	ElementReference	The ElementReference of the input element.
FocusAsync()	() => ValueTask	Gives focus to the input element.
FocusAsync(bool preventScroll)	(bool preventScroll) => ValueTask	Gives focus to the input element.

BitComponentBase parameters

Name	Type	Default value	Description
AriaLabel	string?	null	Gets or sets the accessible label for the component, used by assistive technologies.
Class	string?	null	Gets or sets the CSS class name(s) to apply to the rendered element.
Dir	BitDir?	null	Gets or sets the text directionality for the component's content.
ForceAnimation	bool	false	Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes	Dictionary<string, object>	new Dictionary<string, object>()	Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id	string?	null	Gets or sets the unique identifier for the component's root element.
IsEnabled	bool	true	Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
Style	string?	null	Gets or sets the CSS style string to apply to the rendered element.
TabIndex	string?	null	Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility	BitVisibility	BitVisibility.Visible	Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name	Type	Default value	Description
UniqueId	Guid	Guid.NewGuid()	Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement	ElementReference		Gets the reference to the root HTML element associated with this component.

BitDropdownItem<TValue> properties

Name	Type	Default value	Description
AriaLabel	string?	null	The aria label attribute for the dropdown item.
Class	string?	null	Custom CSS class for the dropdown item.
Id	string?	null	The id for the dropdown item.
Icon	BitIconInfo?	null	The icon to display using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set.
IconName	string?	null	The icon name from the Fluent UI icon set. For external icon libraries, use Icon instead.
Data	object?	null	The custom data for the dropdown item to provide state for the item template.
IsEnabled	bool	null	Determines if the dropdown item is enabled.
IsHidden	bool	null	Determines if the dropdown item is hidden.
ItemType	BitDropdownItemType	BitDropdownItemType.Normal	The type of the dropdown item.
Style	string?	null	Custom CSS style for the dropdown item.
Text	string	string.Empty	The text to render for the dropdown item.
Title	string?	null	The title attribute for the dropdown item.
Value	TValue?	null	The value of the dropdown item.
IsSelected	bool	false	Determines if the item is selected. This property's value is assigned by the component.

BitDropdownOption<TValue> properties

Name	Type	Default value	Description
AriaLabel	string?	null	The aria label attribute for the dropdown option.
Class	string?	null	Custom CSS class for the dropdown option.
Id	string?	null	The id for the dropdown option.
Data	object?	null	The custom data for the dropdown option to provide extra state for the template.
IsEnabled	bool	null	Determines if the dropdown option is enabled.
IsHidden	bool	null	Determines if the dropdown option is hidden.
IsSelected	bool	null	Determines if the dropdown option is selected.
Icon	BitIconInfo?	null	The icon to display using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set.
IconName	string?	null	The icon name from the Fluent UI icon set. For external icon libraries, use Icon instead.
ItemType	BitDropdownItemType	BitDropdownItemType.Normal	The type of the dropdown option.
Style	string?	null	Custom CSS style for the dropdown option.
Text	string	string.Empty	The text to render for the dropdown option.
Title	string?	null	The title attribute for the dropdown option.
Value	TValue?	null	The value of the dropdown option.
IsSelected	bool	false	Determines if the option is selected. This property's value is assigned by the component.

BitDropdownNameSelectors<TItem, TValue> properties

Name	Type	Default value	Description
AriaLabel	BitNameSelectorPair<TItem, string?>	new(nameof(BitDropdownItem<TValue>.AriaLabel))	The AriaLabel field name and selector of the custom input class.
Class	BitNameSelectorPair<TItem, string?>	new(nameof(BitDropdownItem<TValue>.Class))	The CSS Class field name and selector of the custom input class.
Id	BitNameSelectorPair<TItem, string?>	new(nameof(BitDropdownItem<TValue>.Id))	The Id field name and selector of the custom input class.
Data	BitNameSelectorPair<TItem, object?>	new(nameof(BitDropdownItem<TValue>.Data))	The Data field name and selector of the custom input class.
IsEnabled	BitNameSelectorPair<TItem, bool>	new(nameof(BitDropdownItem<TValue>.IsEnabled))	The IsEnabled field name and selector of the custom input class.
IsHidden	BitNameSelectorPair<TItem, bool>	new(nameof(BitDropdownItem<TValue>.IsHidden))	The IsHidden field name and selector of the custom input class.
ItemType	BitNameSelectorPair<TItem, BitDropdownItemType>	new(nameof(BitDropdownItem<TValue>.ItemType))	The ItemType field name and selector of the custom input class.
Icon	BitNameSelectorPair<TItem, BitIconInfo?>	new(nameof(BitDropdownItem<TValue>.Icon))	The Icon field name and selector of the custom input class.
IconName	BitNameSelectorPair<TItem, string?>	new(nameof(BitDropdownItem<TValue>.IconName))	The IconName field name and selector of the custom input class.
Style	BitNameSelectorPair<TItem, string?>	new(nameof(BitDropdownItem<TValue>.Style))	The CSS Style field name and selector of the custom input class.
Text	BitNameSelectorPair<TItem, string?>	new(nameof(BitDropdownItem<TValue>.Text))	The Text field name and selector of the custom input class.
Title	BitNameSelectorPair<TItem, string?>	new(nameof(BitDropdownItem<TValue>.Title))	The Title field name and selector of the custom input class.
Value	BitNameSelectorPair<TItem, TValue?>	new(nameof(BitDropdownItem<TValue>.Value))	The Value field name and selector of the custom input class.
TextSetter	Action<string, TItem>?		The setter function for updating Text property of custom item in Dynamic ComboBox mode upon new item addition.
ValueSetter	Action<TItem, TItem>?		The setter function for updating Value property of custom item in Dynamic ComboBox mode upon new item addition.
IsSelected	string		The IsSelected field name of the custom input class. This property's value is assigned by the component.

BitNameSelectorPair<TItem, TProp> properties

Name	Type	Default value	Description
Name	string		Custom class property name.
Selector	Func<TItem, TProp?>?		Custom class property selector.

BitIconInfo properties

Name	Type	Default value	Description
Name	string?	null	Gets or sets the name of the icon.
BaseClass	string?	null	Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty.
Prefix	string?	null	Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty.

BitDropdownClassStyles properties

Name	Type	Default value	Description
Root	string?	null	Custom CSS classes/styles for the root element of the BitDropdown.
Label	string?	null	Custom CSS classes/styles for the label of the BitDropdown.
Container	string?	null	Custom CSS classes/styles for the main container of the BitDropdown.
TextContainer	string?	null	Custom CSS classes/styles for the text container of the BitDropdown.
ClearButton	string?	null	Custom CSS classes/styles for the clear button of the BitDropdown.
CaretDownIcon	string?	null	Custom CSS classes/styles for the caret down icon of the BitDropdown.
Overlay	string?	null	Custom CSS classes/styles for the overlay of the BitDropdown.
Callout	string?	null	Custom CSS classes/styles for the callout of the BitDropdown.
ResponsiveLabelContainer	string?	null	Custom CSS classes/styles for the responsive panel's label container of the BitDropdown.
ResponsiveLabel	string?	null	Custom CSS classes/styles for the responsive panel label of the BitDropdown.
ResponsiveCloseButton	string?	null	Custom CSS classes/styles for the responsive panel's close button of the BitDropdown.
ResponsiveCloseIcon	string?	null	Custom CSS classes/styles for the responsive panel's close icon of the BitDropdown.
SearchBoxContainer	string?	null	Custom CSS classes/styles for the search box container of the BitDropdown.
SearchBoxIconContainer	string?	null	Custom CSS classes/styles for the search box's icon container of the BitDropdown.
SearchBoxIcon	string?	null	Custom CSS classes/styles for the search box icon of the BitDropdown.
SearchBoxInput	string?	null	Custom CSS classes/styles for the search box input of the BitDropdown.
SearchBoxClearButtonContainer	string?	null	Custom CSS classes/styles for the search box's clear button container of the BitDropdown.
SearchBoxClearButton	string?	null	Custom CSS classes/styles for the search box's clear button of the BitDropdown.
SearchBoxClearIcon	string?	null	Custom CSS classes/styles for the search box's clear icon of the BitDropdown.
ScrollContainer	string?	null	Custom CSS classes/styles for the scroll container of the BitDropdown.
ItemHeader	string?	null	Custom CSS classes/styles for the item header of the BitDropdown.
ItemWrapper	string?	null	Custom CSS classes/styles for the item wrapper of the multi-select BitDropdown.
ItemButton	string?	null	Custom CSS classes/styles for the item button of the BitDropdown.
ItemCheckBox	string?	null	Custom CSS classes/styles for the item check box of the multi-select BitDropdown.
ItemCheckIcon	string?	null	Custom CSS classes/styles for the item check icon of the multi-select BitDropdown.
ItemIcon	string?	null	Custom CSS classes/styles for the item icon of the BitDropdown.
ItemText	string?	null	Custom CSS classes/styles for the item text of the BitDropdown.
ItemDivider	string?	null	Custom CSS classes/styles for the item divider of the BitDropdown.

BitDropdownItemType enum

Name	Value	Description
Normal	0	Dropdown items are being rendered as a normal item.
Header	1	Dropdown items are being rendered as a header, they cannot be selected.
Divider	2	Dropdown items are being rendered as a divider, just draw a line.

BitColor enum

Name	Value	Description
Primary	0	Primary general color.
Secondary	1	Secondary general color.
Tertiary	2	Tertiary general color.
Info	3	Info general color.
Success	4	Success general color.
Warning	5	Warning general color.
SevereWarning	6	SevereWarning general color.
Error	7	Error general color.
PrimaryBackground	8	Primary background color.
SecondaryBackground	9	Secondary background color.
TertiaryBackground	10	Tertiary background color.
PrimaryForeground	11	Primary foreground color.
SecondaryForeground	12	Secondary foreground color.
TertiaryForeground	13	Tertiary foreground color.
PrimaryBorder	14	Primary border color.
SecondaryBorder	15	Secondary border color.
TertiaryBorder	16	Tertiary border color.

BitVisibility enum

Name	Value	Description
Visible	0	The content of the component is visible.
Hidden	1	The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed	2	The component is hidden (display:none).

BitDir enum

Name	Value	Description
Ltr	0	Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl	1	Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto	2	Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

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

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.

Notes

The BitDropdown is a Multi-API component which can accept the list of Items in 3 different ways: 1. The BitDropdownItem class 2. A Custom Generic class 3. The BitDropdownOption component

Introduction

Usage

Basic

Prefix & Suffix

FitWidth

NoBorder

Responsive

Drop direction

Clear button

SearchBox

Immediate search

Validation

Customization

Binding

ComboBox

Chips

Dynamic ComboBox

External Icons

Color

Style & Class

RTL

Virtualization

API

BitDropdown parameters

BitDropdown public members

BitInputBase parameters

BitInputBase public members

BitComponentBase parameters

BitComponentBase public members

BitDropdownItem<TValue> properties

BitDropdownOption<TValue> properties

BitDropdownNameSelectors<TItem, TValue> properties

BitNameSelectorPair<TItem, TProp> properties

BitIconInfo properties

BitDropdownClassStyles properties

BitDropdownItemType enum

BitColor enum

BitVisibility enum

BitDir enum

Feedback

The BitDropdown is a
Multi-API
component which can accept the list of Items in 3 different ways:
1. The
BitDropdownItem
class
2. A
Custom Generic
class
3. The
BitDropdownOption
component