Drop-down list

Note

The task interface configuration guide describes the features of the HTML/JS/CSS editor. You can also try creating a drop-down list in Template Builder.

To add a dropdown list to the task, use {{#field type="select" name="<output field name>"}}... {{/field}}. The entries in the dropdown list are created using the nested expression {{select_item}}. Example:

{{#field type="select" name="colour" placeholder="Choose a color" width="200px"}}
{{select_item value="red" text="Red"}}
{{select_item value="green" text="Green"}} {{/field}}

Add a string field to the output data description.

{
  "colour": {
    "type": "string",
    "required": true
  }
}

Parameters

ParameterDescriptionRequiredDefault value
typeField type: select — Dropdown list.yesno
nameAttribute for the output data field. Contains the output field name.yesno
placeholderThe name of the dropdown list in the interface.nono
width

Width of the field. Set in the following units:

  • Pixels. For example, width="100px".

  • Percentage of the size of the parent element. For example, width="100%".

    You can also use a formula for setting the width. For example, width="calc(100%-30px)".

nodepends on the length of the signature
validation-show

The position of popup hints (displayed if the response didn't pass validation). The position is relative to the input field.

Supported values:

  • Above the input field: "top-left", "top-center", "top-right".

  • Below the input field: "bottom-left", "bottom-center", "bottom-right".

  • To the left of the input field: "left-top", "left-center", "left-bottom".

  • To the right of the input field: "right-top", "right-center", "right-bottom".

  • Don't display the message ("false").

no"top-left"
sizeSize of the field.

Supported values: "S", "M", "L".		no"L"
classThe CSS class for the field. For example, class="annotation".no".field" ".field_type_select"
disabled

Whether data can be edited:

  • disabled=true — Non-editable field.

  • disabled=false — Editable field.

nofalse
mode

Direction to expand the list:

  • mode="dropdown" — Down.

  • mode="dropup" — Up.

no"dropdown"
valueText to write to the output data file if the item is selected.nono
textThe name of the list item.nono
selected

The item selected by default:

  • selected=true — Make item selected by default.

  • selected=false — Leave item deselected by default.

nofalse
Contact support

Last updated: February 15, 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
FAQTroubleshootingSupportGlossary