selectField

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 { it.name } // pass a lambda expression to create a label string of an specific type
}

Parameters

baseClass

optional CSS class that should be applied to the element

build

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

id

the ID of the element

items

a list of all available options

prefix

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

store

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

styling

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