ShellUI Logo
ShellUI

Typed Select

Native select bound to a typed value: enums, numbers, Guids, bools or strings

TypedSelect<TValue> is a styled native <select> whose value is a real type instead of a string. The selected <option value="..."> is parsed into TValue: enums, int and other numbers, Guid, bool, and string are supported, including nullable versions.

Installation

shellui add typed-select

Usage

<TypedSelect TValue="Priority?" @bind-Value="_priority">
    <option value="">Choose a priority</option>
    <option value="Low">Low</option>
    <option value="Medium">Medium</option>
    <option value="High">High</option>
</TypedSelect>

<p>Selected: @_priority</p>

@code {
    private Priority? _priority;

    enum Priority { Low, Medium, High }
}

An empty value="" option maps to null for nullable types.

Numeric values

<TypedSelect TValue="int" @bind-Value="_pageSize">
    <option value="10">10 per page</option>
    <option value="25">25 per page</option>
    <option value="50">50 per page</option>
</TypedSelect>

@code {
    private int _pageSize = 25;
}

API Reference

PropertyTypeDefaultDescription
TValueGeneric type—The value type
ValueTValue?defaultSelected value (supports @bind-Value)
ValueChangedEventCallback<TValue?>—Raised when the selection changes
ChildContentRenderFragment?nullThe <option> elements
DisabledboolfalseDisables the select
Classstring?nullAdditional CSS classes

Other attributes are passed to the <select> element.

On this page