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 direction of checkbox elements (row vs column)

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, store = 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, store = myStore) {
     label { it.second }
     size { large }
     checkedStyle {
          background { color {"green"} }
     }
}