👁 Image
Syncfusion.Blazor.DropDowns 33.2.13

Syncfusion® Blazor DropDown Components

A comprehensive suite of Blazor dropdown and selection components for single/multi-select, autocomplete, and list-based input. Includes DropDownList, MultiSelect Dropdown, ListBox, ComboBox, AutoComplete, and Mention components.

Supported components

This package includes the following components:

• Blazor DropDownList
• Blazor MultiSelect Dropdown
• Blazor ListBox
• Blazor ComboBox
• Blazor AutoComplete
• Blazor Mention

Blazor DropDownList component

The Blazor DropDownList component is a replacement for HTML select tags with rich styling and powerful data binding capabilities.

Key features:

• Data Binding: Bind to local arrays, IEnumerable, API responses, and observable collections
• Single Selection: Non-editable selection of one value from a predefined list
• Filtering: Real-time text search with highlight matching in dropdown
• Grouping: Group items by category or custom field with collapsible groups
• Templates: Custom item , header , footer and value templates for rich content rendering
• Cascading: Dependent dropdowns with hierarchical data relationships
• Keyboard Navigation: Full keyboard support (Arrow keys, Enter, Escape) for accessibility
• UI Customization: Custom CSS, themes, and styling options for seamless integration
• Virtual Scrolling: Efficiently handles large datasets by loading items on demand, ensuring smooth scrolling performance

👁 Blazor DropDownList

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Blazor MultiSelect Dropdown component

The Blazor MultiSelect Dropdown component enables selection of multiple values with checkboxes, tags display, and text filtering.

Key features:

• Multi-Select Support: Select and deselect multiple items simultaneously
• Checkbox Mode: Visual checkboxes for clear selection state indication
• Tag Display: Selected values shown as removable tags in input area
• Text Filtering: Type to filter and search within the dropdown list
• Grouping: Organize items into collapsible category groups
• Custom Tagging: Allow users to add custom values beyond predefined options
• Select All: Bulk selection/deselection of all available items
• Accessibility: Full keyboard navigation and ARIA support for screen readers
• Virtual Scrolling: Efficiently handles large datasets by loading items on demand, ensuring smooth scrolling performance

👁 Blazor MultiSelect Dropdown

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App

• Feature Overview

• Live Demos
• API Reference

Blazor ListBox component

The Blazor ListBox component displays a scrollable list of items with multi-selection, drag-drop, and reordering capabilities.

Key features:

• Multi-Selection: Select one or multiple items with checkbox support
• Drag and Drop: Reorder items within the list or between ListBoxes
• Keyboard Navigation: Arrow keys, Shift+Click, and Ctrl+Click for multi-selection
• Sorting: Built-in ascending/descending sort functionality
• Grouping: Organize items into category groups with collapsible headers
• Reordering: Move selected items up/down with toolbar buttons
• Custom Templates: Rich templates for item rendering with HTML content
• Accessibility: Full keyboard support and ARIA labels for screen readers

👁 Blazor ListBox

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Blazor ComboBox component

The Blazor ComboBox component is an editable dropdown combining text input with a filtered suggestion list for flexible selection.

Key features:

• Editable Input: Type custom values or select from predefined options
• Filtering: Real-time search and filtering as user types in the input
• Data Binding: Support for arrays, API data, and observable collections
• Grouping: Organize dropdown items into category groups
• Cascading: Link multiple ComboBoxes for dependent data relationships
• Custom Templates: Rich item and header templates for enhanced presentation
• Keyboard Navigation: Full keyboard support with autocomplete suggestions
• Accessibility: ARIA labels, screen reader support, and keyboard-only navigation
• Virtual Scrolling: Efficiently handles large datasets by loading items on demand, ensuring smooth scrolling performance

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Blazor AutoComplete component

The Blazor AutoComplete Component provides intelligent suggestions as users type, streamlining data entry with predictive input.

Key features:

• Typeahead Suggestions: Display matching items as user types for faster selection
• Text Filtering: Highlight matching text with case-sensitive and case-insensitive options
• Data Binding: Bind to arrays, IEnumerable, API responses, and observables
• Grouping: Organize suggestions into category groups with headers
• Debounce Support: Optimize performance with configurable debounce intervals
• Min Characters: Require minimum characters before showing suggestions
• Custom Templates: Rich templates for suggestion rendering with HTML content
• Accessibility: Full keyboard navigation and ARIA support for screen readers
• Virtual Scrolling: Efficiently handles large datasets by loading items on demand, ensuring smooth scrolling performance

👁 Blazor AutoComplete

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Blazor Mention component

The Blazor Mention component enables user tagging and mentions similar to social media platforms, triggered by @ or custom symbols.

Key features:

• Mention Triggers: Customize mention character (@ by default) to activate suggestions
• Tagging Support: Tag users or items with @ mention similar to Facebook and Twitter
• Suggestion List: Display filtered suggestions as user types the mention character
• Data Binding: Bind to arrays, API data, and observable collections for mentions
• Grouping: Organize mentions into category groups with collapsible headers
• Custom Patterns: Support multiple mention patterns (@ for users, # for topics, etc.)
• Rich Templates: Custom templates for rendering mention suggestions and content
• Accessibility: Full keyboard navigation and ARIA support for screen readers

👁 Blazor Mention

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Add stylesheet and script references

• For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor file.
• For Blazor WebAssembly App, add these to wwwroot/index.html file.

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick start

Register the Syncfusion® Blazor services in the Program.cs file.

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

AutoComplete

<SfAutoComplete TValue="string" TItem="Country" Placeholder="e.g. Australia" DataSource="@LocalData">
 <AutoCompleteFieldSettings Value="Name" />
</SfAutoComplete>

@code {

 public class Country
 {
 public string Name { get; set; }
 public string Code { get; set; }
 }

 List<Country> LocalData = new List<Country> {
 new Country() { Name = "Australia", Code = "AU" },
 new Country() { Name = "Bermuda", Code = "BM" },
 new Country() { Name = "Canada", Code = "CA" },
 new Country() { Name = "Cameroon", Code = "CM" },
 new Country() { Name = "Denmark", Code = "DK" }
 };
}

ComboBox

<SfComboBox TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
 <ComboBoxFieldSettings Value="ID" Text="Text"></ComboBoxFieldSettings>
</SfComboBox>

@code {
 public class Games
 {
 public string ID { get; set; }
 public string Text { get; set; }
 }
 List<Games> LocalData = new List<Games> {
 new Games() { ID= "Game1", Text= "American Football" },
 new Games() { ID= "Game2", Text= "Badminton" },
 new Games() { ID= "Game3", Text= "Basketball" },
 new Games() { ID= "Game4", Text= "Cricket" },
 new Games() { ID= "Game5", Text= "Football" },
 new Games() { ID= "Game6", Text= "Golf" },
 new Games() { ID= "Game7", Text= "Hockey" },
 new Games() { ID= "Game8", Text= "Rugby"},
 new Games() { ID= "Game9", Text= "Snooker" },
 new Games() { ID= "Game10", Text= "Tennis"},
 };
}

DropDownList

<SfDropDownList TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
 <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
</SfDropDownList>

@code {
 public class Games
 {
 public string ID { get; set; }
 public string Text { get; set; }
 }
 List<Games> LocalData = new List<Games> {
 new Games() { ID= "Game1", Text= "American Football" },
 new Games() { ID= "Game2", Text= "Badminton" },
 new Games() { ID= "Game3", Text= "Basketball" },
 new Games() { ID= "Game4", Text= "Cricket" },
 new Games() { ID= "Game5", Text= "Football" },
 new Games() { ID= "Game6", Text= "Golf" },
 new Games() { ID= "Game7", Text= "Hockey" },
 new Games() { ID= "Game8", Text= "Rugby"},
 new Games() { ID= "Game9", Text= "Snooker" },
 new Games() { ID= "Game10", Text= "Tennis"},
 };
}

ListBox

<SfListBox TValue="string[]" DataSource="@Vehicles" TItem="VehicleData">
 <ListBoxFieldSettings Text="Text" Value="Id" />
</SfListBox>
@code {
 public List<VehicleData> Vehicles = new List<VehicleData> {
 new VehicleData { Text = "Hennessey Venom", Id = "Vehicle-01" },
 new VehicleData { Text = "Bugatti Chiron", Id = "Vehicle-02" },
 new VehicleData { Text = "Bugatti Veyron Super Sport", Id = "Vehicle-03" },
 new VehicleData { Text = "SSC Ultimate Aero", Id = "Vehicle-04" },
 new VehicleData { Text = "Koenigsegg CCR", Id = "Vehicle-05" },
 new VehicleData { Text = "McLaren F1", Id = "Vehicle-06" },
 new VehicleData { Text = "Aston Martin One- 77", Id = "Vehicle-07" },
 new VehicleData { Text = "Jaguar XJ220", Id = "Vehicle-08" }
 };

 public class VehicleData {
 public string Text { get; set; }
 public string Id { get; set; }
 }
}

Mention

<SfMention TItem="PersonData" DataSource="@EmailData">
 <TargetComponent>
 <div id="commentsMention" placeHolder="Type @@ and tag user" ></div>
 </TargetComponent>
 <ChildContent>
 <MentionFieldSettings Text="Name"></MentionFieldSettings>
 </ChildContent>
</SfMention>
<style>
 #commentsMention {
 min-height: 100px;
 border: 1px solid #D7D7D7;
 border-radius: 4px;
 padding: 8px;
 font-size: 14px;
 width: 600px;
 }

 div#commentsMention[placeholder]:empty:before {
 content: attr(placeholder);
 color: #555;
 }
</style>
@code {
 public class PersonData
 {
 public string Name { get; set; }
 public string EmailId { get; set; }
 public string EmployeeImage { get; set; }
 }
 List<PersonData> EmailData = new List<PersonData> {
 new PersonData() { Name="Selma Rose", EmployeeImage="7", EmailId="selma@gmail.com" },
 new PersonData() { Name="Russo Kay", EmployeeImage="8", EmailId="russo@gmail.com" },
 new PersonData() { Name="Camden Kate", EmployeeImage="9", EmailId="camden@gmail.com" }
 };
}

MultiSelect

<SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData">
 <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
</SfMultiSelect>

@code {

 public class Games
 {
 public string ID { get; set; }
 public string Text { get; set; }
 }
 List<Games> LocalData = new List<Games> {
 new Games() { ID= "Game1", Text= "American Football" },
 new Games() { ID= "Game2", Text= "Badminton" },
 new Games() { ID= "Game3", Text= "Basketball" },
 new Games() { ID= "Game4", Text= "Cricket" },
 new Games() { ID= "Game5", Text= "Football" },
 new Games() { ID= "Game6", Text= "Golf" },
 new Games() { ID= "Game7", Text= "Hockey" },
 new Games() { ID= "Game8", Text= "Rugby"},
 new Games() { ID= "Game9", Text= "Snooker" },
 new Games() { ID= "Game10", Text= "Tennis"},
 };
}

Support

• Support portal
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a license
• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

| Toll Free: 1-888-9-DOTNET