Skip to main content

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.

41190438.png

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

You 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