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
Basic
Select an item
Fruits
Vegetables
Select items
Fruits
Vegetables
Select an item
Fruits
Vegetables
Orange
Fruits
Vegetables
Style & Class
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
Binding
Two-way binding:
Apple
Fruits
Vegetables
Apple, Banana
Fruits
Vegetables
OnChange:
Select an item
Fruits
Vegetables
Select items
Fruits
Vegetables
OnSelectItem:
Select an item
Fruits
Vegetables
Select items
Fruits
Vegetables
Customization
Select an item
Items
More Items
Select an item
Items
More Items
Items
More Items
Select an item
Items
More Items
Select an item
Items
More Items
Select an item
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
SearchBox
Default search function:
Select an item
Fruits
Vegetables
Select items
Fruits
Vegetables
Custom search function:
Select an item
Fruits
Vegetables
Select items
Fruits
Vegetables
ComboBox
When the Combo parameter is true, you can type in BitDropdown input and search between items.
Fruits
Vegetables
When the Chips parameter is true, shows the selected items like chips in the ComboBox.
Fruits
Vegetables
When the Dynamic parameter is true, you can add a new item in the ComboBox.
Fruits
Vegetables
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
Fruits
Vegetables
Prefix & Suffix
Fruits:Select an item
Fruits
Vegetables
Select an itemkg
Fruits
Vegetables
Fruits:Select an itemkg
Fruits
Vegetables
Fruits:Select an itemkg
Fruits
Vegetables
RTL
لطفا انتخاب کنید
میوه ها
سیزیجات
انتخاب چند گزینه ای
میوه ها
سیزیجات
Drop direction
Select an item
Select an item
Clear button
Apple
Fruits
Vegetables
Apple, Banana
Fruits
Vegetables
Validation
Virtualization
Items:
Select an item
Select items
ItemsProvider:
Select an item
Select items
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. | |
HeaderTemplate | RenderFragment<TItem>? | null | The custom template for rendering the header items of the dropdown. |
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. |
OnValuesChange | 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 |
---|---|---|---|
DebounceTime | int | 0 | The debounce time in milliseconds. |
DisplayName | string? | null | Gets or sets the display name for this field. |
Immediate | bool | false | Change the content of the input field when the user write text (based on 'oninput' HTML event). |
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. |
OnChange | EventCallback<TValue?> | Callback for when the input value changes. | |
ThrottleTime | int | 0 | The throttle time in milliseconds. |
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. |
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. |
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. |