Select

Displays a dropdown list of options for the user to pick from.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<Select />

When to Use

Choose one or more options from a predefined list of 5-15 items.
Replace native select elements with a styled, searchable dropdown.
Use multi-select mode for tagging, filtering, or assigning multiple values.

For validation, label, and helper text, wrap this input in <FormField>. See Form › Validation Pattern.

Default

With Binding

Selected: none

With Groups

Searchable

Multiple Selection

Selected: none

Collapsible Groups + Group Select

Selected: none

Data-bound mode still needs the panel children. When you pass Items you must still place <SelectTrigger /> and <SelectContent /> inside the <Select> — they render the trigger button and the dropdown panel the bound items fill. A bare <Select Items="…" /> with no children has nothing to render into and shows an empty field.

Items with Icons + Descriptions (data-bound)

Clearable

Loading State

Disabled

Keyboard Interactions

Key	Action
`Enter`	Opens the dropdown or selects the highlighted option.
`Space`	Opens the dropdown when the trigger is focused.
`ArrowDown`	Moves highlight to the next option.
`ArrowUp`	Moves highlight to the previous option.
`Escape`	Closes the dropdown without changing the selection.
`Type to search`	Filters options when the searchable prop is enabled.

API Reference

Select

Property	Type	Default	Description
Value	string?	null	The currently selected value. Use with @bind-Value for two-way binding.
ValueChanged	EventCallback<string>	—	Callback invoked when the selected value changes.
Multiple	bool	false	Enables multi-select mode. Selected items show as tags in the trigger.
Values	List<string>?	null	The selected values in multi-select mode. Use with @bind-Values.
ValuesChanged	EventCallback<List<string>?>	—	Callback invoked when the selected values change in multi-select mode.
Open	bool	false	Controls whether the dropdown is open.
OpenChanged	EventCallback<bool>	—	Callback invoked when the open state changes.
Searchable	bool	false	Enables filtering options by typing in an inline search input.
Clearable	bool	false	Shows a clear button to reset the selection.
Creatable	bool	false	Allows creating new options from the search input.
OnCreate	EventCallback<string>	—	Callback invoked when a new item is created via the search input.
MaxDisplayTags	int	3	Maximum number of tags shown in multi-select mode before showing "+N more".
Disabled	bool	false	Disables the select and prevents user interaction.
IsLoading	bool	false	Indicates a loading state, typically showing a spinner in the dropdown.
IsOpen	bool	false	Programmatic open state (alias for Open). Use with @bind-IsOpen.
IsOpenChanged	EventCallback<bool>	—	Fires when open state changes (alias for OpenChanged).
Items	IEnumerable<TItem>?	null	Data source for auto-rendering items when using the generic data API (instead of SelectItem markup).
ItemValue	Func<TItem, string>?	null	Function that extracts the value string from a TItem when using Items.
ItemText	Func<TItem, string>?	null	Function that extracts the display text from a TItem when using Items.
ItemGroup	Func<TItem, string?>?	null	Optional function that groups items under labelled sections.
ItemDisabled	Func<TItem, bool>?	null	Optional predicate that disables specific items.
ItemTemplate	RenderFragment<TItem>?	null	Custom template for rendering each item row.
Virtualize	bool	false	When true, virtualizes the item list for large data sets.
ItemSize	float	36	Row height in pixels used by the virtualizer.
Required	bool	false	Marks the field as required for form validation.
Invalid	bool	false	Applies error styling to indicate a validation error.
ErrorText	string?	null	Error message shown below when Invalid is true (standalone).
HelperText	string?	null	Help text shown below when there is no error (standalone).
Label	string?	null	Inline label rendered above the select (standalone).
Name	string?	null	HTML name attribute for form identification.
Class	string?	null	Custom CSS classes merged onto the Select's wrapper element.
Placeholder	string?	null	Convenience placeholder shown by SelectTrigger when no value is selected — a top-level alternative to `<SelectTrigger Placeholder="…">`. The trigger's own Placeholder wins if both are set.
AdditionalAttributes	Dictionary<string, object>?	null	Unmatched attributes are forwarded to the wrapper element.
FormField	FormFieldContext?	null	Cascaded context from a parent FormField; drives validation state automatically.

SelectItem

Property	Type	Default	Description
Value	string	""	The value this item represents when selected. Required.

SelectGroup / SelectLabel / SelectTrigger / SelectContent

Property	Type	Default	Description
SelectLabel, SelectTrigger, and SelectContent accept only Class and AdditionalAttributes unless noted below. SelectGroup exposes the richer surface listed under "SelectGroup —" rows: wrap items under a labelled header, collapse them, and offer a single group-level checkbox in Multiple mode.
Placeholder	string?	null	SelectTrigger — text shown when no value is selected.
Label	string?	null	SelectGroup — header text. When null/empty no header renders (still nests its items for layout / grouping semantics).
LabelClass	string?	null	SelectGroup — extra classes on the group label, theming hook for the header.
Collapsible	bool	false	SelectGroup — clicking / Space / Enter on the header expands and collapses the group. An active search auto-expands collapsed groups so matches stay reachable.
DefaultExpanded	bool	true	SelectGroup — initial expanded state for a Collapsible group.
GroupSelect	bool	false	SelectGroup — in Multiple mode, renders a tri-state checkbox on the header that selects / deselects every descendant item (disabled items are skipped; when filtering, only visible matches).

Combobox — Use when the user needs to search and filter a large list of options.
RadioGroup — Better for small lists (2-5 items) where all options should be visible.
DropdownMenu — Use for action menus rather than value selection.

Select

Installation

Usage

When to Use

Keyboard Interactions

API Reference

Select

SelectItem

SelectGroup / SelectLabel / SelectTrigger / SelectContent

Related Components