# Select

Source: https://lumeo.nativ.sh/components/select

# Select

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

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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](/components/form#validation-pattern).

Preview Code

Default

Select an option

Preview Code

With Binding

Select an option

Selected: none

Preview Code

With Groups

Select an option

Preview Code

Searchable

Select an option

Preview Code

Multiple Selection

Select an option

Selected: none

Preview Code

Collapsible Groups + Group Select

Select an option

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.

Preview Code

Items with Icons + Descriptions (data-bound)

Select an option

Preview Code

Clearable

Select an option

Preview Code

Loading State

Select an option

Preview Code

Disabled

Blazor

## 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).

## Related Components

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