Advanced Features

Master the Select component's advanced capabilities

Keyboard Navigation

All keyboard interactions are built-in. No configuration needed!

Key	Action
`↓ Arrow Down`	Open dropdown / move to next item (wraps around)
`↑ Arrow Up`	Move to previous item (wraps around)
`Enter`	Open dropdown / confirm highlighted selection
`Escape`	Close dropdown
`Home`	Jump to first item
`End`	Jump to last item
`Tab`	Close dropdown, move focus to next element

Try it: Click the select below, then use your keyboard to navigate.

<Select TValue="string"
        Items="@items"
        @bind-Value="@selected" />

<!-- Keyboard support is automatic! No configuration required. -->

Accessibility Features (WCAG 2.1)

Full ARIA support for screen readers and assistive technologies.

ARIA Attribute	Element	Purpose
`role="combobox"`	Root element	Identifies the widget type
`aria-expanded`	Root element	Reflects dropdown open/close state
`aria-haspopup="listbox"`	Root element	Announces the dropdown type
`aria-controls`	Root element	Links to the dropdown panel ID
`role="listbox"`	Dropdown panel	Marks the options container
`role="option"`	Each option	Marks selectable items
`aria-selected`	Each option	Indicates selection state
`aria-disabled`	Each option	Marks disabled items

Interactive demo: Use a screen reader or browser DevTools to inspect ARIA attributes.

<label id="color-label">Select a Color</label>
<Select TValue="string"
        Items="@options"
        @bind-Value="@selected"
        AllowClear="true"
        AdditionalAttributes="@(new Dictionary<string,object> {
            ["aria-labelledby"] = "color-label"
        })" />

RTL (Right-to-Left) Support

The Dir parameter flips the layout for Arabic, Hebrew, and other RTL languages.

LTR (English)

RTL (Arabic)

<!-- LTR (Left-to-Right, default) -->
<Select TValue="string" Items="@englishCountries" @bind-Value="@selected" Dir="ltr" />

<!-- RTL (Right-to-Left) -->
<Select TValue="string" Items="@arabicCountries" @bind-Value="@selected" Dir="rtl" />

Internationalization (i18n)

Customize all user-facing text for different languages and regions.

🇺🇸 English

🇫🇷 Français

🇪🇸 Español

Try typing in the search boxes to see localized "no results" messages.

<!-- English -->
<Select Items="@options" />

<!-- French -->
<Select Items="@options"
        SearchPlaceholder="Rechercher..."
        NoOptionsText="Aucune option disponible"
        NoResultsText="Aucun résultat pour "{0}"" />

<!-- Spanish -->
<Select Items="@options"
        SearchPlaceholder="Buscar..."
        NoOptionsText="Sin opciones disponibles"
        NoResultsText="Sin resultados para "{0}"" />

Theme Customization via CSS

Override the default Ant Design theme using the CssClass parameter with custom CSS.

Default Theme

Dark Theme

Green/Success Theme

Minimal Theme

<style>
    .theme-dark .blazorx-select .select-selection {
        background: #1e1e2e;
        border-color: #4a4a6a;
        color: #cdd6f4;
    }
    .theme-dark .blazorx-select .select-dropdown {
        background: #1e1e2e;
        border-color: #4a4a6a;
    }
    /* ... more styles ... */
</style>

<div class="theme-dark">
    <Select Items="@options" CssClass="theme-dark-select" />
</div>

Mobile Optimizations

Recommended mobile configuration:

Parameter	Recommended Value	Reason
`MinimumResultsForSearch`	`0`	Always show search to avoid needing to scroll
`AllowClear`	`true`	Touch-friendly clear affordance
`KeepOpenOnClickOutside`	`false`	Tap outside to dismiss (default)
`Placeholder`	descriptive text	Helps user understand the field purpose

Mobile demo (simulated 375px width):

<Select TValue="string" Items="@options"
        AllowClear="true"
        MinimumResultsForSearch="0"
        Placeholder="Choose an option..."
        KeepOpenOnClickOutside="false" />

Using Select in Modals & Overlays

The Select dropdown may get clipped inside modals or overflow: hidden containers. Here's how to fix it:

Solution 1: Add KeepOpenOnClickOutside="true" so the modal's backdrop click doesn't affect the dropdown.

Solution 2: Ensure the parent modal has proper z-index stacking (z-index: 1050 for modal, z-index: 1051 for dropdown).

<@* Modal backdrop *@>
<div style="position: fixed; z-index: 1050;">
    <div style="background: white; padding: 24px;">
        <Select Items="@options"
                KeepOpenOnClickOutside="true"
                Placeholder="Choose..." />
    </div>
</div>

Programmatic Control

Use public methods to control the Select component programmatically from your C# code.

Current State:

IsOpen: N/A

Selected Value: None

@code {
    private Select<int>? selectRef;
    private int selectedProgrammatic;
    private List<SelectOption<int>> programItems = new();

    protected override void OnInitialized()
    {
        programItems = new()
        {
            new() { Id = 1, Text = "Item 1" },
            new() { Id = 2, Text = "Item 2" },
            new() { Id = 3, Text = "Item 3" },
        };
    }
}

<Select TValue="int" @ref="selectRef" Items="@programItems" @bind-Value="@selectedProgrammatic" />

<button @onclick="async () => await selectRef!.OpenAsync()">Open</button>
<button @onclick="async () => await selectRef!.CloseAsync()">Close</button>
<button @onclick="async () => await selectRef!.SelectOptionAsync(programItems[2])">Select</button>
<button @onclick="async () => await selectRef!.ClearSelectionAsync()">Clear</button>