inputField

fun RenderContext.inputField(styling: BasicParams.() -> Unit = {}, value: Store<String>? = null, baseClass: StyleClass = StyleClass.None, id: String? = null, prefix: String = "inputField", build: InputFieldComponent.() -> Unit = {})

This component generates a text based input field.

You can optionally pass in a store in order to set the value and react to updates automatically.

There are options to choose from predefined sizes and some variants from the Theme.

To enable or disable it or to make it readOnly just use the well known attributes of the HTML input element. To manually set the value or react to a change refer also to its event's. All that can be achieved via the ElementMixin.element property!

inputField(value = dataStore /* inject a store so all user inputs are automatically reflected! */) {
placeholder("Placeholder") // render a placeholder text for empty field
}

// all state management can also be done manually if needed:
val someStore = storeOf("")
inputField {
placeholder("Enter text")
value(someStore.data) // connect a flow to the component for setting its value
events {
changes.values() handledBy someStore.update // connect an handler for emitting the user input made
}
element {
// exposes the underlying HTML input element for direct access. Use with caution!
}
}

// apply predefined size and variant
inputField(value = dataStore) {
size { small } // render a smaller input
variant { filled } // fill the background with ``light`` color
placeholder("Placeholder") // render a placeholder text for empty field
}

// Of course you can apply custom styling as well
inputField({ // just use the ``styling`` parameter!
background {
color { dark }
}
radius { "1rem" }
},
value = dataStore) {
size { small } // render a smaller input
placeholder("Placeholder") // render a placeholder text for empty field
}

See also

Parameters

styling

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

value

optional Store that holds the data of the input

baseClass

optional CSS class that should be applied to the element

id

the ID of the element

prefix

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

build

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