Dropdown Component
Basic
Placeholder, pre-selected, required
razor
<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" />Leading content in options
Icons, avatars, status dots
razor
@* 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" />Sizes
xs (36px), sm (40px), md (44px)
razor
<Dropdown Label="Extra Small" Size="xs" Items="items" />
<Dropdown Label="Small" Size="sm" Items="items" />
<Dropdown Label="Medium" Size="md" Items="items" />States
Disabled and error
razor
<Dropdown Label="Disabled" Disabled="true" Items="items" />
<Dropdown Label="Error state"
HasError="true"
ErrorMessage="Please select a team member."
Items="items" />Two-way binding
Bind SelectedValue writes back on change
Selected value
(none)
This updates in real time via @bind-SelectedValue.razor
<Dropdown Label="Pick a member"
Items="teamMembers"
@bind-SelectedValue="boundValue" />
@code {
private string? boundValue;
}