Tesserae

Description

The Dropdown component renders an interactive list of options with a single visible selected item by default. When a user clicks the dropdown, all available options become visible. It supports both single-select and multi-select modes, customizable arrow icons, asynchronous item loading, validation, and styling options such as disabled, required, no-border, or no-background. Use the Dropdown when you want to allow users to choose from a list of items while keeping the UI compact.

Usage

Instantiate a Dropdown component using the static helper method from Tesserae.UI. Items can be provided directly or loaded asynchronously. The following sample demonstrates a basic single-select Dropdown with two options and custom validation logic.

Sample Code

API reference

Samples

Basic Dropdown

The following sample demonstrates the creation of a basic single-select Dropdown with two options and a custom validation handler.

Asynchronous Items Loading

The next example shows how to configure async item loading for a Dropdown. The items will be loaded after a 5-second delay once the dropdown is opened.

Lazy Search with a Pre-selected Value

SearchAsync turns the search box into a lazy loader for option lists too large to load up front: the term the user types is handed to a callback (debounced), and the items it returns are added to the ones already listed instead of replacing them. Items whose Key is already listed are dropped, so a lookup never duplicates an option the dropdown already has.

Pre-selecting a value works the same way as on any other dropdown: put it in the seed Items(...), marked .Selected(), with the same key the callback gives that option.

var current = DropdownItem(user.Name).SetKey(user.UID).Selected();

var dropdown = Dropdown()
   .Items(new[] { current }.Concat(firstPageItems).ToArray())
   .SearchAsync(async term =>
    {
        var found = await API.Users.SearchAsync(term, limit: 100);
        return found.Select(u => DropdownItem(u.Name).SetKey(u.UID)).ToArray();
    }, placeholder: "Search users...");
  • Seed it even when it is not on the first page. The callback only adds options; it never selects one. The box shows the selection straight away, without the list being opened.
  • Match the keys. When a later lookup returns that same option, the incoming copy is dropped because its key is already listed, so the selected seed item stays and there is no duplicate. Key defaults to the item's text, so a seed item without SetKey next to results keyed by id is listed twice.
  • Changing it later from code: set IsSelected = true on the Item the dropdown holds (in single-select mode that unselects the others), calling AddItems(item) first if it is not listed yet. AddItems skips an instance whose key is already listed, and selecting an instance the dropdown does not hold does nothing. Selecting from code raises OnInput, and in single-select mode OnChange, like a user pick would. Calling Items(...) again with the new item .Selected() also works, but replaces the whole list.

See also