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

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

Displayed elements (views)

Component	Description
view.action-button	Button that calls an action.
view.alert	The component creates a color block to highlight important information.
view.audio	The component plays audio.
view.collapse	Expandable block.
view.device-frame	Wraps the content of a component in a frame that is similar to a mobile phone. You can place other components inside the frame.
view.divider	Horizontal delimiter.
view.group	Groups components visually into framed blocks.
view.iframe	Displays the web page at the URL in an iframe window.
view.image	Displays an image.
view.labeled-list	Displaying components as a list with labels placed on the left.
view.link	Universal way to add a link.
view.link-group	Puts links into groups.
view.list	Block for displaying data in a list.
view.markdown	Block for displaying text in Markdown.
view.text	Block for displaying text.
view.video	Player for video playback.

Data entry elements (fields)

Component	Description
field.audio	Component 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-radio	Adds a button. This is useful for creating an optional answer.
field.button-radio-group	Adds 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.checkbox	A checkbox.
field.checkbox-group	Adds 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.date	A component for entering the date and time in the desired format and range.
field.email	Creates a field for entering an email address.
field.file	This component can be used for uploading files. It's displayed in the interface as an upload button.
field.image-annotation	Component for image labeling.
field.list	A component that allows a Toloker to add and remove list items, such as text fields to fill in. This way you can allow a Toloker to give multiple answers to a question.
field.media-file	Adds buttons for different types of uploads: uploading photos or videos, selecting files from the file manager or choosing from the gallery.
field.number	A component that allows a Toloker to enter a number.
field.phone-number	Creates a field for entering a phone number.
field.quiz	A quiz component that counts only the first answered values.
field.radio-group	A component for selecting one value out of several options. It is designed as a group of circles arranged vertically.
field.select	Button for selecting from a drop-down list. Use this component when the list is long and only one option can be chosen.
field.text	A 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-annotation	A component for text segmentation.
field.textarea	Box for entering multi-line text.

Helpers

Component	Description
helper.concat-arrays	Merging multiple arrays into a single array.
helper.entries2object	Creating an object from a specified array of key-value pairs.
helper.if	The If...Then...Else operator. Allows you to execute either one block of code or another, depending on the condition.
helper.join	The component combines two or more strings into one. You can add a delimiter to separate the strings, such as a space or comma.
helper.object2entries	Creating an array of key-value pairs from the specified object.
helper.replace	Allows you to replace some parts of the string with others.
helper.search-query	Component for creating a string with a search query reference.
helper.switch	A switch-case construction: sequentially checks the conditions and executes the code when the condition turns out to be true.
helper.text-transform	Allows you to change the case of the text, like make all letters uppercase.
helper.transform	Creates a new array by transforming each of the elements in the original array.
helper.translate	Component for translating interface elements to other languages. More details in Translating the task interface.

Conditions

Component	Description
condition.all	Checks that all child conditions are met. If any of the conditions is not met, the component returns 'false'.
condition.any	Checks that at least one of the child conditions is met. If none of the conditions is met, the component returns `false`.
condition.empty	Checks 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 a Toloker didn't interact with the data entry fields (`fields.`).
condition.equals	Checks whether the original value is equal to the specified value.
condition.link-opened	Checks that a Toloker clicked the link.
condition.not	Returns the inverse of the specified condition.
condition.played	Checks whether playback has started.
condition.played-fully	Checks that playback is complete.
condition.required	Checks that the data is filled in.
condition.same-domain	Checks if the link that you entered belongs to a specific site. If it does, returns `true`, otherwise, `false`.
condition.schema	Allows validating data using JSON Schema. This is a special format for describing data in JSON format.
condition.sub-array	Checks whether the array is a subarray of another element.

Plugins

Component	Description
plugin.field.image-annotation.hotkeys	Used to set hotkeys for the field.image-annotation component.
plugin.field.text-annotation.hotkeys	Use this to set keyboard shortcuts for the field.text-annotation component.
plugin.hotkeys	You can use this to set keyboard shortcuts for actions.
plugin.toloka	A plugin with extra settings for tasks in Toloka.
plugin.trigger	Use this to configure triggers that trigger a specific action when an event occurs.

Actions

Component	Description
action.bulk	Use this component to call multiple actions at the same time.
action.notify	The component creates a message in the lower-left corner of the screen.
action.open-close	Changes the display mode for another component — opens or closes it.
action.open-link	Opens a new tab in the browser with the specified web page.
action.play-pause	This component controls audio or video playback. It stops playback in progress or starts if it is stopped.
action.rotate	Rotates the specified component by 90 degrees.
action.set	Sets the value from `payload` in the data in the `data` property.
action.toggle	The component changes the value in the data from `true` to `false` and vice versa.

Contact support

Last updated: March 29, 2023

Introduction

Getting started

Important tips

Useful recommendations

Working with Toloka

Projects

Pools

Tasks

Results

Project analysis

Toloka settings

Task interface

Template Builder

HTML/CSS/JS editor

Help and support

FAQ Troubleshooting Support Glossary