Native Select

The Native Select component wraps the browser's native <select> element to ensure consistent styling while maintaining native behavior and accessibility.

Basic Example

A simple select component.

Source

<EditForm Model="@_model">
    <RzNativeSelect @bind-Value="_model.Fruit" For="@(() => _model.Fruit)">
        <RzNativeSelectOption Value="@("apple")">Apple</RzNativeSelectOption>
        <RzNativeSelectOption Value="@("banana")">Banana</RzNativeSelectOption>
        <RzNativeSelectOption Value="@("blueberry")">Blueberry</RzNativeSelectOption>
        <RzNativeSelectOption Value="@("grapes")">Grapes</RzNativeSelectOption>
        <RzNativeSelectOption Value="@("pineapple")">Pineapple</RzNativeSelectOption>
    </RzNativeSelect>
</EditForm>

Usage in a Field

Combine with Field components for labels and error messages.

Source

<Field>
    <FieldLabel For="@(() => _model.SelectedCar)">Car Brand</FieldLabel>
    <RzNativeSelect @bind-Value="_model.SelectedCar" For="@(() => _model.SelectedCar)" id="car-select">
        <option value="">Select a car</option>
        <RzNativeSelectOptGroup Label="German">
            <RzNativeSelectOption Value="@("audi")">Audi</RzNativeSelectOption>
            <RzNativeSelectOption Value="@("bmw")">BMW</RzNativeSelectOption>
            <RzNativeSelectOption Value="@("mercedes")">Mercedes</RzNativeSelectOption>
        </RzNativeSelectOptGroup>
        <RzNativeSelectOptGroup Label="Japanese">
            <RzNativeSelectOption Value="@("toyota")">Toyota</RzNativeSelectOption>
            <RzNativeSelectOption Value="@("honda")">Honda</RzNativeSelectOption>
            <RzNativeSelectOption Value="@("mazda")">Mazda</RzNativeSelectOption>
        </RzNativeSelectOptGroup>
    </RzNativeSelect>
    <FieldDescription>Please select your preferred car brand.</FieldDescription>
</Field>

Accessibility

RzNativeSelect<TValue> renders a real native <select> through InputSelect<TValue>, so it keeps browser and assistive-technology semantics for labels, values, disabled state, required state, and validation.

Prefer a visible <label for="..."> association through Field and FieldLabel. If you provide explicit aria-label, aria-labelledby, or aria-describedby, those attributes are forwarded to the inner select. Use AriaDescribedBy to append component-specific hint or error ids without replacing existing description ids.

Keyboard interaction remains fully native and is not intercepted: Arrow keys move through options, Home/End jump, Enter/Space commit according to browser behavior, Escape closes an open list in supporting UAs, and typeahead follows platform-native rules.

Use RzNativeSelect when native select behavior is preferred. Use RzCombobox when you need custom filtering, async loading, or advanced popup/list behaviors beyond native select capabilities.

Labeling and Descriptions

Native select labeling should primarily use a visible <label for="...">. You can additionally forward aria-label, aria-labelledby, and aria-describedby. Use AriaDescribedBy when you need to append extra hint or validation IDs.

Source

<Field>
    <FieldLabel For="@(() => _model.SelectedCar)">Car Brand</FieldLabel>
    <RzNativeSelect @bind-Value="_model.SelectedCar"
                    For="@(() => _model.SelectedCar)"
                    id="car-brand"
                    aria-describedby="car-help"
                    AriaDescribedBy="car-error">
        <RzNativeSelectOption Value="@("audi")">Audi</RzNativeSelectOption>
        <RzNativeSelectOption Value="@("bmw")">BMW</RzNativeSelectOption>
    </RzNativeSelect>
    <FieldDescription><span id="car-help">Choose the brand you drive most.</span></FieldDescription>
    <span id="car-error">Please choose a supported brand.</span>
</Field>

Keyboard Behavior

RzNativeSelect does not override browser behavior. Keyboard support follows each browser and platform's native select implementation.

Key	Native behavior
`Arrow Up / Arrow Down`	Moves through available options according to native select behavior.
`Home / End`	Jumps to first or last option when supported by the browser.
`Enter / Space`	Opens/closes or commits selection using platform-native rules.
`Escape`	Closes the open options UI in browsers that expose a popup list.
`Typeahead`	Moves to matching options using native incremental search behavior.

Component Parameters

Property	Type	Default	Description
`For`	`Expression<Func<TValue>>`	Required	An expression that identifies the bound value.
`Value`	`TValue?`	`default`	The current value of the select.
`ChildContent`	`RenderFragment`	`null`	The options to display within the select element.
`AriaDescribedBy`	`string?`	`null`	Appends additional description ids to the inner select's `aria-describedby` without removing consumer-provided values.