Select
Select
Displays a list of options for the user to pick from—triggered by a button.
Basic Select
A simple select with a list of options.
Grouped Options
Organize related items into labeled groups.
Scrollable Long List
Handle many options with automatic scrolling (max-h-60).
Generic Type Support
Select component supports generic types (int, enum, custom types).
Bottom Sheet (Mobile)
Use Presentation=BottomSheet to render the options in a Drawer that slides up from the bottom. Recommended for mobile-first UIs.
Infinite Scroll
Load items in batches as the user scrolls to the bottom of the SelectContent dropdown.
Open the dropdown and scroll down to trigger
OnLoadMore on SelectContent.
A spinner appears during the simulated 600 ms fetch. Once all 40 items are loaded,
EndOfListMessage is shown instead of the spinner.
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| TValue | generic | - | The value type (string, int, enum, etc.). |
| Value | @bind-Value / TValue? | — | The selected value. |
| Class | string? | — | Additional CSS classes applied to the root element. |
| Disabled | bool | false | Disables the select. |
| Presentation | SelectPresentation | Popover | How the options are presented. Popover (default) or BottomSheet (mobile drawer). |
| SelectContent: OnLoadMore | EventCallback | — | Invoked when the user scrolls near the bottom. Use to append additional SelectItem elements. |
| SelectContent: IsLoading | bool | false | Shows a spinner at the bottom of the dropdown while the next batch is loading. |
| SelectContent: EndOfListMessage | string? | null | Message shown when all items have been loaded. Hidden when null or empty. |