SelectMenu

requires layer

A component that allows the user to select options from a dropdown.

Properties

Color, Variant, AppearanceOverride

This component uses styling from the Input component, and as such, the Color, Variant, and AppearanceOverride properties are passed to the Input component.

Information for styling the Input component can be found here.

The UI demo below only has one color available, but Input has more colors available.

Example Color

default

Code block has not loaded. An error may have occurred.

PopoverAppearanceOverride

The appearance override for the popover. Theming information can be found here.

Type

Code block has not loaded. An error may have occurred.

EntryAppearanceOverride

The appearance override for Menu Entries in the dropdown. Theming information can be found here.

Type

Code block has not loaded. An error may have occurred.

Disabled

Type

Code block has not loaded. An error may have occurred.

Visible

Type

Code block has not loaded. An error may have occurred.

MaxHeight

Type

Code block has not loaded. An error may have occurred.

ToggleIcon

Type

Code block has not loaded. An error may have occurred.

SelectedIcon

Type

Code block has not loaded. An error may have occurred.

SearchQuery

Type

Code block has not loaded. An error may have occurred.

Search

Type

Code block has not loaded. An error may have occurred.

Searchable

Type

Code block has not loaded. An error may have occurred.

SearchPlaceholder

Type

Code block has not loaded. An error may have occurred.

Placement

Type

Code block has not loaded. An error may have occurred.

Options

Type

Code block has not loaded. An error may have occurred.

SelectedOptions

One-way Value

Type

Code block has not loaded. An error may have occurred.

Placeholder

Type

Code block has not loaded. An error may have occurred.

Multiple

Type

Code block has not loaded. An error may have occurred.

Creatable

Type

Code block has not loaded. An error may have occurred.

CreatableWhen

If Creatable is set to true, this value determines when to show the button to create a new option.

empty: The button is shown when there are no visible options. always: The button is always shown. function: This function is called with the current search query. If it returns true, the button is shown.

Type

Code block has not loaded. An error may have occurred.

OnCreate

This function is called when the user creates a new option. The function is passed the query that the user entered. The function should insert the new option into an Options value itself.

Type

Code block has not loaded. An error may have occurred.

OnOptionClicked

Type

Code block has not loaded. An error may have occurred.

Instance Properties

This instance takes all the properties of a Frame. SpecialKeys, such as fusion.Children will also be passed to the instance.

Slots

Slots allow you to customize specific aspects of the component completely, often replacing the old instances. Slots are passed parameters that allow the slot to interact with component data that is normally not exposed. Generally, an useColor (the function passed by theme:get()) function is passed as first parameter to allow the new components to use the same color as the parent component. When using slots, make sure to wrap any code that uses reactive values in a Computed (or any other classes that isolate state), to prevent unnecessary updates.

LeftInput

Function Type

Code block has not loaded. An error may have occurred.

Label

Function Type

Code block has not loaded. An error may have occurred.

RightInput

Function Type

Code block has not loaded. An error may have occurred.

CreateOption

This appears when Creatable is set to true and the conditions in CreatableWhen are met. Something to note is that this slot completely replaces the default create option, so OnCreate will not be called. Make sure to account for this in your custom create option.

Function Type

Code block has not loaded. An error may have occurred.

Types

Certain types are reused across different components. To make these types easily accessible, they are available below:

option

Code block has not loaded. An error may have occurred.