Custom Templates

Customize item rendering with templates for rich UI experiences

Item Template with Avatars

Use the ItemTemplate to render custom item content. Here, employee names are displayed with colored avatar circles and job titles.

Selected: None

<Select TValue="int"
        Items="@employees"
        @bind-Value="@selectedEmployee">
    <ItemTemplate Context="option">
        <div style="display: flex; align-items: center; gap: 12px;">
            <div style="background: @((option.Data as EmployeeInfo)?.Color); width: 32px; height: 32px; border-radius: 50%;">
                @((option.Data as EmployeeInfo)?.Initials)
            </div>
            <div>
                <div>@option.Text</div>
                <small>@((option.Data as EmployeeInfo)?.Title)</small>
            </div>
        </div>
    </ItemTemplate>
</Select>

Item Template with Badges and Icons

Render product information with category badges, prices, and stock indicators using custom templates.

Selected: None

<Select TValue="int"
        Items="@products"
        @bind-Value="@selectedProduct">
    <ItemTemplate Context="option">
        <div style="display: flex; align-items: center; justify-content: space-between;">
            <div style="display: flex; align-items: center; gap: 10px;">
                <span style="font-size: 18px;">@((option.Data as ProductInfo)?.Icon)</span>
                <div>
                    <div>@option.Text</div>
                    <small>@((option.Data as ProductInfo)?.Category)</small>
                </div>
            </div>
            <div style="display: flex; align-items: center; gap: 8px;">
                <span style="color: #2196F3;">@((option.Data as ProductInfo)?.Price)</span>
                <span style="color: @((option.Data as ProductInfo)?.InStock == true ? "#4CAF50" : "#f44336");">●</span>
            </div>
        </div>
    </ItemTemplate>
</Select>

Selected Item Template

The SelectedItemTemplate controls the display in the trigger area (different from the dropdown list). Here, selected employees show a different format with department info.

Notice: Dropdown shows just the name, but trigger area shows name with department

<Select TValue="int"
        Items="@employees"
        @bind-Value="@selectedEmployee">
    <SelectedItemTemplate Context="option">
        <div style="display: flex; align-items: center; gap: 8px;">
            <div style="background: @((option.Data as EmployeeInfo)?.Color); width: 28px; height: 28px; border-radius: 50%;">
                @((option.Data as EmployeeInfo)?.Initials)
            </div>
            <span>@option.Text – @((option.Data as EmployeeInfo)?.Department)</span>
        </div>
    </SelectedItemTemplate>
</Select>

Group Header Template

Customize group headers with icons and additional styling. The GroupHeaderTemplate receives the group name as context.

Selected: None

<Select TValue="int"
        Items="@employees"
        @bind-Value="@selectedEmployee">
    <GroupHeaderTemplate Context="groupName">
        <div style="display: flex; align-items: center; gap: 8px; font-weight: 600; color: #1976D2;">
            <span style="font-size: 16px;">
                @(groupName == "Engineering" ? "🔧" : groupName == "Design" ? "🎨" : "📊")
            </span>
            <span>@groupName</span>
        </div>
    </GroupHeaderTemplate>
</Select>

No Data Template

Customize the empty state message when there are no items or no search results. Try searching for something that doesn't exist to see the custom message.

Selected: None

<Select TValue="int"
        Items="@items"
        MinimumResultsForSearch="0"
        @bind-Value="@selected">
    <NoDataTemplate>
        <div style="padding: 12px; text-align: center; color: #666;">
            <div style="font-size: 24px; margin-bottom: 8px;">🔍</div>
            <div style="font-weight: 500;">No items found</div>
            <small>Try a different search term</small>
        </div>
    </NoDataTemplate>
</Select>

All Templates Combined

Use multiple templates together to create a fully custom experience. This example combines all four templates for maximum customization.

Template Priority & Fallback Chain:

SelectedItemTemplate (if provided) → fallback to default display text
ItemTemplate (if provided) → fallback to option.Text
GroupHeaderTemplate (if provided) → fallback to plain group name
NoDataTemplate (if provided) → fallback to default messages

Selected: None

<Select TValue="int"
        Items="@employees"
        @bind-Value="@selected">
    <SelectedItemTemplate Context="option">
        <!-- Trigger display -->
    </SelectedItemTemplate>
    <ItemTemplate Context="option">
        <!-- Dropdown item display -->
    </ItemTemplate>
    <GroupHeaderTemplate Context="groupName">
        <!-- Group header display -->
    </GroupHeaderTemplate>
    <NoDataTemplate>
        <!-- Empty state display -->
    </NoDataTemplate>
</Select>