Dropdown

Overview

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.

Usage

Uncontrolled Single Selection

<Dropdown ItemsSource=@items
          Placeholder="Select an option"
          OnChange=@UncontrolledSingleChangeHandler
          Label=@($"Selected: {uncontrolledSingleSelectionResult?.Text}")
          Style="width:300px;"
          DropdownWidth="450"
          DropdownHeight="150"
          @ref=@dropDown1 />
<br />
<DefaultButton OnClick=ClickHandler>Clear!</DefaultButton>
            
            
Uncontrolled Multi-Selection
<Label>Selected: @string.Join(", ", uncontrolledMultiSelectionResult.Select(x => x.Text))</Label>
<Dropdown ItemsSource=@items
          MultiSelect="true"
          Placeholder="Select options..."
          OnChange=@UncontrolledMultiChangeHandler
          Style="width:300px;" />
            
            
Controlled Single Selection
<Label>Selected: @(controlledSingleSelectionResult?.Text)</Label>
<Dropdown ItemsSource=@items
          Placeholder="Select an option"
          @bind-SelectedOption=@controlledSingleSelectionResult
          Style="width:300px;" />
            
            
Controlled Multi-Selection
<Label>Selected: @string.Join(", ", controlledMultiSelectionResult!.Select(x => x.Text))</Label>
<Dropdown ItemsSource=@items
          MultiSelect="true"
          Placeholder="Select options..."
          @bind-SelectedOptions=@controlledMultiSelectionResult
          Style="width:300px;" />
            
            
Disabled
<Dropdown ItemsSource=@items
          Disabled="true"
          Placeholder="Select an option"
          Style="width:300px;" />
            
            
Disabled with Selected
<Dropdown ItemsSource=@items
          Disabled="true"
          Placeholder="Select an option"
          @bind-SelectedOption=@controlledSingleSelectionResult
          Style="width:300px;" />
            
            
Dropdown using Blazor Forms Validation
<EditForm Model="exampleModel" OnValidSubmit=@HandleValidSubmit>
    <DataAnnotationsValidator />
    <FluentUIValidationSummary />
    <Dropdown ItemsSource=@items
              Placeholder="Select an option"
              @bind-SelectedOption=@(exampleModel.SelectionResult)
              Style="width:300px;" />
    <SubmitButton Text="Submit" />
</EditForm>