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.

Introduction video


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

Usage

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