fun RenderContext.formControl(styling: BasicParams.() -> Unit = {}, baseClass: StyleClass? = null, id: String? = null, prefix: String = "formControl", build: FormControlComponent.() -> Unit = {})

This component wraps input elements like inputField, selectField, checkbox, checkboxGroup, radioGroup. It enriches those controls with a describing text or label, an optional helper message and also an optional error message. On top it marks a control as required if that should be exposed.

The controls themselves offer the same API as if used stand alone. They must be just declared within the build parameter expression of this factory function.

Be aware that only one control within a formControl is allowed! If more than one are configured, only the first will get rendered; the remaining ones will be reported as errors in the log.

This component can be customized in different ways and thus is quite flexible to...

Have a look at some example calls

// wrap an input field
formControl {
label { "Some describing label" }
required { true } // mark the above label with a small red star
helperText { "You can provide a hint here" }
// provide a Flow<ComponentValidationMessage> in order to show some message
errorMessage {
flowOf(errorMessage("id", "Sorry, always wrong in this case"))
// just use the appropriate control with its specific API!
inputField(store = someStore) {
placeholder("Some text to type")

// providing more than one control results in errors:
// - the first will get rendered
// - starting with the second all others will be logged as errors
formControl {
// leave out label and so on
// ...
// first control function called -> ok, will get rendered
inputField(store = someStore) {
placeholder("Some text to type")
// second call -> more than one control -> will not get rendered, but instead be logged as error!
checkBox {
checked { }
events {
changes.states() handledBy someStore.someHandler
// probably more calls to controls -> also reported as errors!

For details about the configuration options, have a look at FormControlComponent.

See also



optional CSS class that should be applied to the element


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


the ID of the element


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


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