Input Checkbox
Overview
Placement | or |
Required KM objects | -- |
Introduction to Input Checkbox
Input Checkbox is a component for Views. It can show a checkbox with a label, which when selected will be activated, or deactivated.
It is a great way to allow for user interaction. When combining the checkbox component with input, you can reuse the value that is written in the input for example to set an option in a different component.
![]() |
This checkbox allows for user interaction. Depending on whether it is checked or not, an input variable that can be used elsewhere gets updated.
Basic configuration
To configure a basic Checkbox component, you must have at least the following features defined.
Attribute | Required | Type | Description |
---|---|---|---|
label | true | String | Defines the label text of the checkbox. |
onChange: update: variables: - name: | true | Defines a unique identifier for the field. It gets auto-generated if not defined. It is important in context of Base and Extension. | |
activated | true | String | Defines the value which should be written into the value in case the checkbox is activated. |
deactivated | true | String | Defines the value which should be written into the value in case the checkbox is deactivated. |
Info
optimised for component editor
id: input-checkbox-76da9873-2f1f-4e52-96f8-91f8ac27f15f type: input-checkbox settings: label: Label onChange: update: variables: - name: variable_name activated: activated deactivated: deactivated
Using the input from checkbox in other components
- id: embeddedView type: view settings: key: your-view-key shareFilters: ${(checkboxValue === 'checked' && "true") || (checkboxValue === 'unchecked' && "false"}
In this example, you would allow a user to choose with the help of the checkbox if the filters of an embedded view should be shared with the view it is embedded.
Advanced configuration
The following configuration options are available to further customize your checkbox component.
Attribute | Required | Type | Possible values | Default Value | Description |
---|---|---|---|---|---|
styles | false | Defines the different styles you can apply to the component. | |||
position | false | Defines that the position of the component within the given layout. | |||
horizontal | false | Enum | full left center right | full | Defines the horizontal alignment position within the given layout. |
vertical | false | Enum | top center bottom | bottom | Defines the vertical alignment position with the given layout. |
isChecked | false | Boolean | true false | false | Defines if the Checkbox should be checked on page load. |
Info
optimised for component editor
id: input-checkbox-76da9873-2f1f-4e52-96f8-91f8ac27f15f type: input-checkbox settings: styles: position: horizontal: full vertical: bottom isChecked: true label: Label onChange: update: variables: - name: variable_name activated: activated deactivated: deactivated