- bit BlazorUI
Home Docs

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.

Usage

Implementation

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 ChevronDown The icon name of the chevron down element of the dropdown. The default value is ChevronDown.
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.
Classes BitDropdownClassStyles? null Custom CSS classes for different parts of the BitDropdown.
DefaultValue string? null The default key value that will be initially used to set selected item if the Value parameter is not set.
DefaultValues List<string> new List<string>() The default key value 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.
IsMultiSelect bool false Enables the multi select mode.
IsOpen bool false Determines the opening state of the callout. (two-way bound)
IsRequired bool false Enables the required mode of the dropdown.
IsReselectable bool false Enables calling the select events when the same item is selected in single select mode.
IsResponsive bool false Enables the responsive mode of the component for small screens.
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.
IsSelectedSetter Action<bool, TItem>? null The callback that is called for setting text on a IsSelected property in a custom items.
Combo bool false Activates the ComboBox feature in BitDropDown component.
Label string? null The text of the label element of the dropdown.
LabelTemplate RenderFragment? null The custom template for the label of the dropdown.
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.
OnChange EventCallback<TItem[]> The callback that called when selected items change.
OnClick EventCallback<MouseEventArgs> The click callback for the dropdown.
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.
Options RenderFragment? null Alias of ChildContent.
OverscanCount int 3 Determines how many additional items are rendered before and after the visible region.
OnDynamicAdd EventCallback<string> The callback that is called when a new item is on added Dynamic ComboBox mode.
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.
Placeholder string? null The placeholder text of the dropdown.
PlaceholderTemplate RenderFragment<BitDropdown<TItem, TValue>>? null The custom template for the placeholder of the dropdown.
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.
Chips bool false Shows the selected items like chips in the BitDropdown.
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.
Title string? null The title to show when the mouse hovers over the dropdown.
TextTemplate RenderFragment<<TItem, TValue>>? null The custom template for the text of the dropdown.
TextSetter Action<string, TItem>? null The callback that is called for setting text on a text property in a custom item when a new item is on added Dynamic ComboBox mode.
Values ICollection<TValue?> null The key values of the selected items in multi select mode. (two-way bound)
ValueSetter Action<TItem, TValue>? null The callback that is called for setting text on a value property in a custom item when a new item is on added Dynamic ComboBox mode.
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.
InputElement ElementReference The ElementReference to the input element in combo-box mode.
FocusAsync ValueTask Gives focus to the input element in combo-box mode.
BitInputBase parameters
Name
Type
Default value
Description
DisplayName string? null Gets or sets the display name for this field.
InputHtmlAttributes IReadOnlyDictionary<string, object>? null Gets or sets a collection of additional attributes that will be applied to the created element.
Value TValue? null Gets or sets the value of the input. This should be used with two-way binding.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
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.
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.
IsSelectedSetter Action<bool, TValue> The setter function for updating IsSelected property of custom item in Dynamic ComboBox mode upon new item addition.
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.