Dropdown list

To add a dropdown list to the task, use the {{#field type="select" name="<field ID>"}}... {{/field}}. Field ID must match the field name in the output data description. The entries in the dropdown list are created by the nested expression {{select_item}}. For example:

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

Parameter

Description

Required

Default value

type

Field type: select — Dropdown list.

yes

no

name

Field ID. Must match the field name in the output data description.

yes

no

placeholder

The name of the dropdown list in the interface.

no

no

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)".

no

depends 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"

size

Size of the field.

Supported values: "S", "M", "L".

no

"L"

class

The CSS class for the field. For example, class="annotation".

no

".field" ".field_type_select"

disabled

Whether data can be edited:

  • disabled=true — The field can't be edited.

  • disabled=false — The field can be edited.

no

false

mode

Direction in which the list expands:

  • mode="dropdown" — down.

  • mode="dropup" — up.

no

"dropdown"

value

Text to write to the output data file if the entry is selected.

no

no

text

The name of the list entry.

no

no

selected

The entry selected by default:

  • selected=true — Make entry selected by default.

  • selected=false — Leave entry deselected by default.

no

false

Add a field of string type into the output data description.

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