fun <T> RenderContext.selectField(styling: BasicParams.() -> Unit = {}, items: List<T>, store: Store<T>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "selectField", build: SelectFieldComponent<T>.() -> Unit)

This function generates a selectField element.

You have to pass a store in order to handle the selected value, and the events will be connected automatically.

A basic use case:

val myOptions = listOf("black", "red", "yellow")
val selectedItem = storeOf("red") // preselect "red"
selectField (items = myOptions, store = selectedItem) {

Preselect nothing and set a placeholder text:

val myOptions = listOf("black", "red", "yellow")
val selectedItem = storeOf<String?>(null)
selectField (items = myOptions, store = selectedItem) {
placeholder("My Placeholder") // will be shown until some item is selected!

Customize the appearance:

selectField (items = myOptions, store = selectedItem) {
icon { fromTheme { circleAdd } }
size { large }
variant { flushed }

Set a specific label:

val persons = listOf(Person("John Doe", 37), Person("Jane Doe", 35))
val selectedItem = storeOf(persons[0])
selectField(items = persons, store = selectedItem) {
label { } // pass a lambda expression to create a label string of an specific type



optional CSS class that should be applied to the element


a lambda expression for setting up the component itself. Details in SelectFieldComponent


the ID of the element


a list of all available options


the prefix for the generated CSS class resulting in the form `$prefix-$hash`


for backing up the preselected item and reflecting the selection automatically.


a lambda expression for declaring the styling as fritz2's styling DSL