CheckboxComponent

open class CheckboxComponent(store: Store<Boolean>?) : Component<Label> , EventProperties<HTMLInputElement> , ElementProperties<Input> , InputFormProperties, SeverityProperties

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

This class offers the following configuration features:

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

  • 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

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!
}
}

Constructors

CheckboxComponent
Link copied to clipboard
js
fun CheckboxComponent(store: Store<Boolean>?)

Types

Companion
Link copied to clipboard
js
object Companion

Functions

enabled
Link copied to clipboard
js
open override fun enabled(value: Boolean)
open override fun enabled(value: Flow<Boolean>)
equals
Link copied to clipboard
js
open operator fun equals(other: Any?): Boolean
hashCode
Link copied to clipboard
js
open fun hashCode(): Int
label
Link copied to clipboard
js
fun label(value: RenderContext.() -> Unit)
fun label(value: String)
fun label(value: Flow<String>)
render
Link copied to clipboard
js
open override fun render(context: RenderContext, styling: BoxParams.() -> Unit, baseClass: StyleClass?, id: String?, prefix: String): Label
Central method that should do the actual rendering of a component.
severity
Link copied to clipboard
js
open override fun severity(value: SeverityProperties.SeverityContext.() -> Severity)
Property to manage the severity value of the component.
severityClassOf
Link copied to clipboard
js
open override fun severityClassOf(severityStyle: SeverityStyles, prefix: String): Flow<StyleClass>
This function manages the task to map a value of the Severity enumeration to a corresponding style defined within the SeverityStyles interface.
toString
Link copied to clipboard
js
open fun toString(): String

Properties

checked
Link copied to clipboard
js
val checked: DynamicComponentProperty<Boolean>
checkedStyle
Link copied to clipboard
js
var checkedStyle: ComponentProperty<Style<BasicParams>>
disabled
Link copied to clipboard
js
open override val disabled: DynamicComponentProperty<Boolean>
element
Link copied to clipboard
js
open override val element: ComponentProperty<Input.() -> Unit>
This property enables the client to access the deeper features of an element even though the component itself does not offer an appropriate functionality.
events
Link copied to clipboard
js
open override val events: ComponentProperty<WithEvents<HTMLInputElement>.() -> Unit>
This property enables the client to access all events offered by the underlying HTML element.
icon
Link copied to clipboard
js
val icon: ComponentProperty<Icons.() -> IconDefinition>
labelStyle
Link copied to clipboard
js
val labelStyle: ComponentProperty<Style<BasicParams>>
readonly
Link copied to clipboard
js
open override val readonly: DynamicComponentProperty<Boolean>
severity
Link copied to clipboard
js
open override val severity: NullableDynamicComponentProperty<Severity?>
size
Link copied to clipboard
js
val size: ComponentProperty<FormSizes.() -> Style<BasicParams>>