Dropdown Component

<Dropdown Label="Team member"
          Placeholder="Select team member"
          Items="teamMembers"
          Hint="This is a hint text to help user." />

<Dropdown Label="Team member"
          Placeholder="Select team member"
          Items="teamMembers"
          @bind-SelectedValue="selectedTeamMember" />

<Dropdown Label="Team member"
          Required="true"
          ShowHelp="true"
          HelpText="Choose a team member for this task"
          Items="teamMembers" />

@* Each DropdownItem has a LeadingContent RenderFragment *@
iconItems = new List<Dropdown.DropdownItem>
{
    new() { Value = "design", Text = "Design", LeadingContent = IconPencil() },
    new() { Value = "development", Text = "Development", LeadingContent = IconCode() },
};

<Dropdown Label="Category" Items="iconItems" @bind-SelectedValue="selectedIcon" />
<Dropdown Label="Assignee" Items="avatarItems" @bind-SelectedValue="selectedAvatar" />
<Dropdown Label="Status"   Items="dotItems"    @bind-SelectedValue="selectedDot" />

<Dropdown Label="Extra Small" Size="xs" Items="items" />
<Dropdown Label="Small"       Size="sm" Items="items" />
<Dropdown Label="Medium"      Size="md" Items="items" />

<Dropdown Label="Disabled" Disabled="true" Items="items" />

<Dropdown Label="Error state"
          HasError="true"
          ErrorMessage="Please select a team member."
          Items="items" />

Selected value

(none)

This updates in real time via @bind-SelectedValue.

<Dropdown Label="Pick a member"
          Items="teamMembers"
          @bind-SelectedValue="boundValue" />

@code {
    private string? boundValue;
}

Dropdown Component

Basic

Leading content in options

Sizes

States

Two-way binding