CheckboxGroupComponent

This class combines the configuration and the core styling of a checkbox group. The rendering itself is also done within the companion object.

In order to render a checkbox group use the checkboxGroup factory function!

This class offers the following configuration features:

• the items as a List<T>

• the preselected items via a Flow<List<T>>

• the label(mapping) of a switch (static, dynamic via a Flow<String> or customized content of a Div.RenderContext) the the example below

• some predefined styling variants (size)

• the style of the items (checkbox)

• the style checked state

• the style of the label

• the checked icon ( use our icon library of our theme )

• choose the orientation of checkbox elements (vertical or horizontal)

This can be done within a functional expression that is the last parameter of the factory function, called build. It offers an initialized instance of this CheckboxGroupComponent class as receiver, so every mutating method can be called for configuring the desired state for rendering the checkbox.

Example usage

// simple use case showing the core functionality
val options = listOf("A", "B", "C")
val myStore = storeOf(listOf("B"))
checkboxGroup(items = options, values = myStore) {
}

// one can handle the events and preselected item also manually if needed:
val options = listOf("A", "B", "C")
checkboxGroup(items = options) {
     selectedItems(options.skip(1)) // for selecting "B" and "C" or an empty list (default)
                                    // if nothing should be selected at all
     events {
         selected handledBy someStoreOfString
     }
}

// use case showing some styling options and a store of List<Pair<Int,String>>
val myPairs = listOf((1 to "ffffff"), (2 to "rrrrrr" ), (3 to "iiiiii"), (4 to "tttttt"), ( 5 to "zzzzzz"), (6 to "222222"))
val myStore = storeOf(<List<Pair<Int,String>>)
checkboxGroup(items = myPairs, values = myStore) {
     label { it.second }
     size { large }
     checkedStyle {
          background { color {"green"} }
     }
}