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.
Selected: none
Selected: none
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.
With Searchable + Creatable, typing a value that doesn't exist shows a 'Create' option. OnCreate adds it to the list.
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
SelectItem
SelectGroup
Wraps items under a labelled header, collapses them, and offers a single group-level checkbox in Multiple mode.
SelectLabel
SelectTrigger
SelectContent
Related Components
- 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.