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 RzField components for labels and error messages.

Source

<RzField>
    <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>
</RzField>

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.