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: deactivatedUsing 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