List of components

Components are JSON objects that you can use when creating an interface in the template builder. For example, use them to add an image, button, or action.

The name of the component is specified in the type property in the format: <category>.<name>. Each component has its own set of acceptable properties described in detail on the component's page.

Categories:

  • data: Components used for working with data: input, output, or intermediate.

  • layout: Options for positioning elements in the interface, such as in columns or side-by-side. If you have more than one element in the interface, these components will help you arrange them the way you want.

  • view: Elements displayed in the interface, such as text, list, audio player, or image.

  • field: Fields for entering data, such as a text field or drop-down list.

  • condition: Check an expression against a condition. For example, you can check that a text field is filled in.

  • helper: Perform various operations, such as if-then-else or switch-case.

  • plugin: Plugins that provide expanded functionality. For example, you can use plugin.hotkeys to set up shortcuts.

  • action: Perform various actions, such as showing notifications.

Note: Some components are context-specific. For example, you can only use plugins in the root plugins element. You can see the available components in the editor tooltips when you press the Tab key.

Element layouts

ComponentDescription
layout.barsA component that adds top and bottom bars to the content.
layout.columnsA component for placing content in columns.
layout.compareUse it to arrange interface elements for comparing them. For example, you can compare several photos.
layout.side-by-sideThe component displays several data blocks of the same width on a single horizontal panel.
layout.sidebarLets you place the main content block and an adjacent panel with controls on a page.
ComponentDescription
layout.barsA component that adds top and bottom bars to the content.
layout.columnsA component for placing content in columns.
layout.compareUse it to arrange interface elements for comparing them. For example, you can compare several photos.
layout.side-by-sideThe component displays several data blocks of the same width on a single horizontal panel.
layout.sidebarLets you place the main content block and an adjacent panel with controls on a page.

Displayed elements (views)

ComponentDescription
view.action-buttonButton that calls an action.
view.alertThe component creates a color block to highlight important information.
view.audioThe component plays audio.
view.collapseExpandable block.
view.device-frameWraps the content of a component in a frame that is similar to a mobile phone. You can place other components inside the frame.
view.dividerHorizontal delimiter.
view.groupGroups components visually into framed blocks.
view.iframeDisplays the web page at the URL in an iframe window.
view.imageDisplays an image.
view.labeled-listDisplaying components as a list with labels placed on the left.
view.linkUniversal way to add a link.
view.link-groupPuts links into groups.
view.listBlock for displaying data in a list.
view.mapAdds a map to your task.
view.markdownBlock for displaying text in Markdown.
view.textBlock for displaying text.
view.videoPlayer for video playback.
ComponentDescription
view.action-buttonButton that calls an action.
view.alertThe component creates a color block to highlight important information.
view.audioThe component plays audio.
view.collapseExpandable block.
view.device-frameWraps the content of a component in a frame that is similar to a mobile phone. You can place other components inside the frame.
view.dividerHorizontal delimiter.
view.groupGroups components visually into framed blocks.
view.iframeDisplays the web page at the URL in an iframe window.
view.imageDisplays an image.
view.labeled-listDisplaying components as a list with labels placed on the left.
view.linkUniversal way to add a link.
view.link-groupPuts links into groups.
view.listBlock for displaying data in a list.
view.mapAdds a map to your task.
view.markdownBlock for displaying text in Markdown.
view.textBlock for displaying text.
view.videoPlayer for video playback.

Data entry elements (fields)

ComponentDescription
field.audioComponent for recording audio. Works in the Toloka app for mobile devices. In a browser, this component opens a window for uploading an audio file.
field.button-radioAdds a button. This is useful for creating an optional answer.
field.button-radio-groupAdds buttons for selecting an answer option. This is useful if there are several options. You can add just one button, but it's easier to use field.button-radio for that.
field.checkboxA checkbox.
field.checkbox-groupAdds a group of checkboxes for selecting independent answer options. This is useful if there are several options. You can add just one checkbox, but it's easier to use field.checkbox for that.
field.dateA component for entering the date and time in the desired format and range.
field.emailCreates a field for entering an email address.
field.fileThis component can be used for uploading files. It's displayed in the interface as an upload button.
field.image-annotationComponent for image labeling.
field.listA component that allows the user to add and remove list items, such as text fields to fill in. This way you can allow the user to give multiple answers to a question.
field.media-fileAdds buttons for different types of uploads: uploading photos or videos, selecting files from the file manager or choosing from the gallery.
field.numberA component that allows the user to enter a number.
field.phone-numberCreates a field for entering a phone number.
field.radio-groupA component for selecting one value out of several options. It is designed as a group of circles arranged vertically.
field.selectButton for selecting from a drop-down list. Use this component when the list is long and only one option can be chosen.
field.textA field for entering a short text, not more than a line. To add a field for entering multiple lines of text, use field.textarea.
field.text-annotationA component for text segmentation.
field.textareaBox for entering multi-line text.
ComponentDescription
field.audioComponent for recording audio. Works in the Toloka app for mobile devices. In a browser, this component opens a window for uploading an audio file.
field.button-radioAdds a button. This is useful for creating an optional answer.
field.button-radio-groupAdds buttons for selecting an answer option. This is useful if there are several options. You can add just one button, but it's easier to use field.button-radio for that.
field.checkboxA checkbox.
field.checkbox-groupAdds a group of checkboxes for selecting independent answer options. This is useful if there are several options. You can add just one checkbox, but it's easier to use field.checkbox for that.
field.dateA component for entering the date and time in the desired format and range.
field.emailCreates a field for entering an email address.
field.fileThis component can be used for uploading files. It's displayed in the interface as an upload button.
field.image-annotationComponent for image labeling.
field.listA component that allows the user to add and remove list items, such as text fields to fill in. This way you can allow the user to give multiple answers to a question.
field.media-fileAdds buttons for different types of uploads: uploading photos or videos, selecting files from the file manager or choosing from the gallery.
field.numberA component that allows the user to enter a number.
field.phone-numberCreates a field for entering a phone number.
field.radio-groupA component for selecting one value out of several options. It is designed as a group of circles arranged vertically.
field.selectButton for selecting from a drop-down list. Use this component when the list is long and only one option can be chosen.
field.textA field for entering a short text, not more than a line. To add a field for entering multiple lines of text, use field.textarea.
field.text-annotationA component for text segmentation.
field.textareaBox for entering multi-line text.

Helpers

ComponentDescription
helper.concat-arraysMerging multiple arrays into a single array.
helper.entries2objectCreating an object from a specified array of key-value pairs.
helper.ifThe If...Then...Else operator. Allows you to execute either one block of code or another, depending on the condition.
helper.joinThe component combines two or more strings into one. You can add a delimiter to separate the strings, such as a space or comma.
helper.object2entriesCreating an array of key-value pairs from the specified object.
helper.replaceAllows you to replace some parts of the string with others.
helper.search-queryComponent for creating a string with a search query reference.
helper.switchA switch-case construction: sequentially checks the conditions and executes the code when the condition turns out to be true.
helper.text-transformAllows you to change the case of the text, like make all letters uppercase.
helper.transformCreates a new array by transforming each of the elements in the original array.
helper.translateComponent for translating interface elements to other languages. More details in Translating the task interface.
helper.proxyYou can use this component to download files from Yandex.Disk.
ComponentDescription
helper.concat-arraysMerging multiple arrays into a single array.
helper.entries2objectCreating an object from a specified array of key-value pairs.
helper.ifThe If...Then...Else operator. Allows you to execute either one block of code or another, depending on the condition.
helper.joinThe component combines two or more strings into one. You can add a delimiter to separate the strings, such as a space or comma.
helper.object2entriesCreating an array of key-value pairs from the specified object.
helper.replaceAllows you to replace some parts of the string with others.
helper.search-queryComponent for creating a string with a search query reference.
helper.switchA switch-case construction: sequentially checks the conditions and executes the code when the condition turns out to be true.
helper.text-transformAllows you to change the case of the text, like make all letters uppercase.
helper.transformCreates a new array by transforming each of the elements in the original array.
helper.translateComponent for translating interface elements to other languages. More details in Translating the task interface.
helper.proxyYou can use this component to download files from Yandex.Disk.

Conditions

ComponentDescription
condition.allChecks that all child conditions are met. If any of the conditions is not met, the component returns 'false'.
condition.anyChecks that at least one of the child conditions is met. If none of the conditions is met, the component returns false.
condition.emptyChecks that the data didn't get a value. If it did, returns false. This is useful if you need to check the optional template data (data.*) or make sure that the user didn't interact with the data entry fields (fields.*).
condition.equalsChecks whether the original value is equal to the specified value.
condition.link-openedChecks that the user clicked the link.
condition.notReturns the inverse of the specified condition.
condition.playedChecks whether playback has started.
condition.played-fullyChecks that playback is complete.
condition.requiredChecks that the data is filled in.
condition.same-domainChecks if the link that you entered belongs to a specific site. If it does, returns true, otherwise, false.
condition.schemaAllows validating data using JSON Schema. This is a special format for describing data in JSON format.
condition.sub-arrayChecks whether the array is a subarray of another element.
condition.distanceThis component checks whether the sent coordinates match the ones that you specified.
ComponentDescription
condition.allChecks that all child conditions are met. If any of the conditions is not met, the component returns 'false'.
condition.anyChecks that at least one of the child conditions is met. If none of the conditions is met, the component returns false.
condition.emptyChecks that the data didn't get a value. If it did, returns false. This is useful if you need to check the optional template data (data.*) or make sure that the user didn't interact with the data entry fields (fields.*).
condition.equalsChecks whether the original value is equal to the specified value.
condition.link-openedChecks that the user clicked the link.
condition.notReturns the inverse of the specified condition.
condition.playedChecks whether playback has started.
condition.played-fullyChecks that playback is complete.
condition.requiredChecks that the data is filled in.
condition.same-domainChecks if the link that you entered belongs to a specific site. If it does, returns true, otherwise, false.
condition.schemaAllows validating data using JSON Schema. This is a special format for describing data in JSON format.
condition.sub-arrayChecks whether the array is a subarray of another element.
condition.distanceThis component checks whether the sent coordinates match the ones that you specified.

Plugins

ComponentDescription
plugin.field.image-annotation.hotkeysUsed to set hotkeys for the field.image-annotation component.
plugin.field.text-annotation.hotkeysUse this to set keyboard shortcuts for the field.text-annotation component.
plugin.hotkeysYou can use this to set keyboard shortcuts for actions.
plugin.tolokaA plugin with extra settings for tasks in Toloka.
plugin.triggerUse this to configure triggers that trigger a specific action when an event occurs.
ComponentDescription
plugin.field.image-annotation.hotkeysUsed to set hotkeys for the field.image-annotation component.
plugin.field.text-annotation.hotkeysUse this to set keyboard shortcuts for the field.text-annotation component.
plugin.hotkeysYou can use this to set keyboard shortcuts for actions.
plugin.tolokaA plugin with extra settings for tasks in Toloka.
plugin.triggerUse this to configure triggers that trigger a specific action when an event occurs.

Actions

ComponentDescription
action.bulkUse this component to call multiple actions at the same time.
action.notifyThe component creates a message in the lower-left corner of the screen.
action.open-closeChanges the display mode for another component — opens or closes it.
action.open-linkOpens a new tab in the browser with the specified web page.
action.play-pauseThis component controls audio or video playback. It stops playback in progress or starts if it is stopped.
action.rotateRotates the specified component by 90 degrees.
action.setSets the value from payload in the data in the data property.
action.toggleThe component changes the value in the data from true to false and vice versa.
ComponentDescription
action.bulkUse this component to call multiple actions at the same time.
action.notifyThe component creates a message in the lower-left corner of the screen.
action.open-closeChanges the display mode for another component — opens or closes it.
action.open-linkOpens a new tab in the browser with the specified web page.
action.play-pauseThis component controls audio or video playback. It stops playback in progress or starts if it is stopped.
action.rotateRotates the specified component by 90 degrees.
action.setSets the value from payload in the data in the data property.
action.toggleThe component changes the value in the data from true to false and vice versa.

Data sources

ComponentDescription
data.locationThis component sends the device coordinates.
ComponentDescription
data.locationThis component sends the device coordinates.