CheckboxComponent

This class combines the configuration and the core styling of a checkbox.

This class offers the following configuration features:

• the label(mapping) static or dynamic via a Flow or customized content see the examples below

• some predefined styling variants (size)

• the style of the checkbox

• the style checked state

• the style of the label

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

• link an external boolean flow to set the checked state of the box

• link an external boolean flow to set the disabled state of the box

• link events of the checkbox like changes with external handlers

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 CheckboxComponent class as receiver, so every mutating method can be called for configuring the desired state for rendering the checkbox.

Example usage

// simple, store based:
val cheeseStore = storeOf(false)
checkbox(value = cheeseStore) {
     label("with extra cheese") // set the label
}

// with manual event handling and further options
val cheeseStore = storeOf(false)
checkbox {
     label("with extra cheese") // set the label
     size { normal } // choose a predefined size
     checked(cheeseStore.data) // link a [Flow<Boolean>] in order to visualize the checked state
     events { // open inner context with all DOM-element events
         changes.states() handledBy cheeseStore.update // connect the changes event with the state store
     }
     element {
         // exposes the underlying HTML input element for direct access. Use with caution!
     }
}