Configuring an input checkbox for legacy views
Legacy view component
You're currently viewing a topic about a legacy view component in Studio. This component can still be used in legacy Studio views, however we recommend using the visual view editor in the new Studio experience. The updated interface includes drag and drop capabilities, allowing you to easily add components and configure your views.
For more information, see: Views.
Add a labeled checkbox to your view, enabling users to click a box to activate or deactivate a feature.
 |
Basic input checkbox configuration
To configure a basic input checkbox component, the following attributes are available:
Attribute | Required | Type | Description |
|---|---|---|---|
label | Yes | String | Defines the label text of the checkbox. |
onChange: update: variables: - name: | Yes |
| Defines a unique identifier for the field. It gets auto-generated if not defined. It is important in context of Base and Extension. |
activated | Yes | String | Defines the value which should be written into the value in case the checkbox is activated. |
deactivated | Yes | String | Defines the value which should be written into the value in case the checkbox is deactivated. |
The example YAML for a basic input checkbox component:
id: input-checkbox-76da9873-2f1f-4e52-96f8-91f8ac27f15f
type: input-checkbox
settings:
label: Label
onChange:
update:
variables:
- name: variable_name
activated: activated
deactivated: deactivatedYou can also use a checkbox inside another component. To do this, here is an example YAML:
- 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 input checkbox configuration
To configure an advanced input checkbox component, the following attributes are available:
Attribute | Required | Type | Possible values | Default Value | Description |
|---|---|---|---|---|---|
styles | No | Defines the different styles you can apply to the component. | |||
position | No | Defines that the position of the component within the given layout. | |||
horizontal | No | Enum | full left center right | full | Defines the horizontal alignment position within the given layout. |
vertical | No | Enum | top center bottom | bottom | Defines the vertical alignment position with the given layout. |
isChecked | No | Boolean | true false | false | Defines if the Checkbox should be checked on page load. |
The example YAML for an advanced input checkbox component:
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