Dropdown
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: BitDropdownItem class, a custom Generic class, and BitDropdownOption component.Introduction video
Music: Music Cocktails, Musician: AlexGuz, URL: https://open.spotify.com/artist/1u0Nlnljg2xGHJV6X7W4i1
Usage
Basic
Displays basic dropdowns demonstrating single and multi-select options, including required and disabled states.
Select an item
Fruits
Vegetables
Select items
Fruits
Vegetables
Select an item
Fruits
Vegetables
Select an item
Fruits
Vegetables
Orange
Fruits
Vegetables
Prefix & Suffix
Use prefixes and suffixes in BitDropdown, including combinations and the disabled state.
Fruits:Select an item
Fruits
Vegetables
Select an itemkg
Fruits
Vegetables
Fruits:Select an itemkg
Fruits
Vegetables
Fruits:Select an itemkg
Fruits
Vegetables
FitWidth
Enables fit-content width for the dropdown that sets the width of the component based on its content size.
Select an item
Fruits
Vegetables
Select items
Fruits
Vegetables
NoBorder
The dropdown can be rendered without any border.
Select an item
Fruits
Vegetables
Select items
Fruits
Vegetables
Responsive
When the IsResponsive parameter is true, on small screens the drop down items will render in a side panel.
Select an item
Fruits
Vegetables
Drop direction
Explores different drop directions for the BitDropdown component, including automatic and explicit directions.
Select an item
Select an item
Clear button
Shows the usage of the clear button in BitDropdown, allowing users to clear selected values in single and multi-select dropdowns.
Apple
Fruits
Vegetables
Value: f-app
Apple, Banana
Fruits
Vegetables
Values: f-app,f-ban
SearchBox
Examples of dropdowns with search functionality, including default and custom search functions.
Select an item
Fruits
Vegetables
Select items
Fruits
Vegetables
Custom search function:
Select an item
Fruits
Vegetables
Select items
Fruits
Vegetables
Validation
Demonstrates how validation can be applied to BitDropdown, including required fields, numeric input, character constraints, email validation, and range validation.
Customization
Shows how to customize dropdowns using templates for header, text, item, placeholder, label, and callout sections.
Select an item
Items
More Items
Select an item
Items
More Items
Select an item
Items
More Items
Select an item
Items
More Items
Select an item
Items
More Items
Select an item
Best in the world
Fruits
Vegetables
Binding
Demonstrates two-way binding and change event handling for dropdowns, showcasing single and multi-select scenarios.
Two-way binding:
Apple
Fruits
Vegetables
Selected Value: f-app
Apple, Banana
Fruits
Vegetables
Selected Values: f-app,f-ban
OnChange:
Select an item
Fruits
Vegetables
Changed Value:
Select items
Fruits
Vegetables
Changed Values:
OnSelectItem:
Select an item
Fruits
Vegetables
Selected Value:
Select items
Fruits
Vegetables
Selected Value:
Virtualization
Demonstrates virtualization in the BitDropdown component for handling large datasets efficiently.
With Items:
Select an item
Select items
With ItemsProvider:
Select an item
Select items
With ItemsProvider and InitialSelectedItems:
Product 100
Product 100, Product 99
ComboBox
When the Combo parameter is true, you can type in BitDropdown input and search between items.
Fruits
Vegetables
Value:
Fruits
Vegetables
Values:
Chips
When the Chips parameter is true, shows the selected items like chips in the ComboBox.
Fruits
Vegetables
Value:
Fruits
Vegetables
Values:
Dynamic ComboBox
When the Dynamic parameter is true, you can add a new item in the ComboBox.
Fruits
Vegetables
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).
Fruits
Vegetables
Value:
Fruits
Vegetables
Values:
Style & Class
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
Component's Style & Class:
Select an item
Fruits
Vegetables
Select an item
Fruits
Vegetables
Item's Style & Class:
Select an item
Fruits
Vegetables
Styles & Classes:
Select an item
Fruits
Vegetables
Select an item
Fruits
Vegetables
RTL
Use BitDropdown in right-to-left (RTL).
لطفا انتخاب کنید
میوه ها
سیزیجات
انتخاب چند گزینه ای
میوه ها
سیزیجات
لطفا انتخاب کنید
میوه ها
سیزیجات
API
BitDropdown parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
AutoFocusSearchBox | bool | false | Enables auto-focusing of the SearchBox input when the callout is open. |
CalloutHeaderTemplate | RenderFragment? | null | Custom template to render as a header in the callout. |
CalloutFooterTemplate | RenderFragment? | false | Custom template to render as a footer in the callout. |
CaretDownIconName | string? | null | The icon name of the chevron down element of the dropdown. |
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. |
Classes | BitDropdownClassStyles? | null | Custom CSS classes for different parts of the BitDropdown. |
Combo | bool | false | Activates the ComboBox feature in BitDropDown component. |
DefaultValue | string? | null | The default value that will be initially used to set selected item if the Value parameter is not 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. |
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. |
IsOpen | bool | false | Determines the opening state of the callout. (two-way bound) |
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. |
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. |
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 |
Default value |
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 |
---|---|---|---|
DisplayName | string? | null | Gets or sets the display name for this field. |
InputHtmlAttributes | IReadOnlyDictionary<string, object>? | null | Gets or sets a collection of additional attributes that will be applied to the created element. |
Name | string? | null | Gets or sets the name of the element. Allows access by name from the associated form. |
NoValidate | bool | false | Disables the validation of the input. |
OnChange | EventCallback<TValue?> | Callback for when the input value changes. | |
ReadOnly | bool | false | Makes the input read-only. |
Required | bool | false | Makes the input required. |
Value | TValue? | null | Gets or sets the value of the input. This should be used with two-way binding. |
BitInputBase public members
Name |
Type |
Default value |
Description |
---|---|---|---|
InputElement | ElementReference | The ElementReference of the input element. | |
FocusAsync() | () => ValueTask | Gives focus to the input element. | |
FocusAsync(bool preventScroll) | (bool preventScroll) => ValueTask | Gives focus to the input element. |
BitComponentBase parameters
Name |
Type |
Default value |
Description |
---|---|---|---|
AriaLabel | string? | null | The aria-label of the control for the benefit of screen readers. |
Class | string? | null | Custom CSS class for the root element of the component. |
Dir | BitDir? | null | Determines the component direction. |
HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Capture and render additional attributes in addition to the component's parameters. |
Id | string? | null | Custom id attribute for the root element. if null the UniqueId will be used instead. |
IsEnabled | bool | true | Whether or not the component is enabled. |
Style | string? | null | Custom CSS style for the root element of the component. |
Visibility | BitVisibility | BitVisibility.Visible | Whether the component is visible, hidden or collapsed. |
BitComponentBase public members
Name |
Type |
Default value |
Description |
---|---|---|---|
UniqueId | Guid | Guid.NewGuid() | The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction. |
RootElement | ElementReference | The ElementReference of the root element. |
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. |
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. |
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. |
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. |
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. |
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. |
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. |
- On this page