Skip to main content
Version: v2.4.1

DropdownResponse

Defined in: parser/types.ts:610

The DropdownResponse interface is used to define the properties of a dropdown response. DropdownResponses render as a select input with user specified options.

{
"id": "q-color",
"prompt": "What is your favorite color?",
"location": "aboveStimulus",
"type": "dropdown",
"default": "Blue",
"placeholder": "Please choose your favorite color",
"options": ["Red", "Blue"]
}

Here's an example of a multiselect dropdown with minimum and maximum selections:

{
"id": "q-multiselect-dropdown",
"prompt": "Select the fruits you like.",
"location": "aboveStimulus",
"type": "dropdown",
"default": ["Banana", "Orange"],
"placeholder": "Select your favorite fruits",
"options": ["Apple", "Banana", "Cherry", "Grape", "Orange", "Strawberry", "Watermelon", "Pineapple"],
"minSelections": 2,
"maxSelections": 4
}

Extends​

Properties​

PropertyTypeDescriptionInherited fromDefined in
default?string | string[]The default value of the response. Use a string for single-select dropdowns and a string array for multiselect dropdowns.-parser/types.ts:615
excludeFromRandomization?booleanExclude response from randomization. If present, will override the responseOrder randomization setting in the components. Defaults to false.BaseResponse.excludeFromRandomizationparser/types.ts:377
hidden?booleanControls whether the response is hidden.BaseResponse.hiddenparser/types.ts:367
idstringThe id of the response. This is used to identify the response in the data file.BaseResponse.idparser/types.ts:349
infoText?stringThe description that is displayed when the participant hovers over the response. This does not accept markdown.BaseResponse.infoTextparser/types.ts:355
location?ConfigResponseBlockLocationControls the response location. These might be the same for all responses, or differ across responses. Defaults to belowStimulusBaseResponse.locationparser/types.ts:359
maxSelections?numberThe maximum number of selections that are required. This will make the dropdown a multiselect dropdown.-parser/types.ts:621
minSelections?numberThe minimum number of selections that are required. This will make the dropdown a multiselect dropdown.-parser/types.ts:619
options(string | StringOption)[]The options that are displayed in the dropdown.-parser/types.ts:617
paramCapture?stringUse to capture querystring parameters in answers such as participant_name. See the examples for how this is used, but prefer uiConfig.urlParticipantIdParam if you are capturing a participant ID.BaseResponse.paramCaptureparser/types.ts:365
placeholder?stringThe placeholder text that is displayed in the input.-parser/types.ts:613
promptstringThe prompt that is displayed to the participant. You can use markdown here to render images, links, etc.BaseResponse.promptparser/types.ts:351
required?booleanControls whether the response is required to be answered. Defaults to true.BaseResponse.requiredparser/types.ts:357
requiredLabel?stringYou can provide a required label, which makes it so a participant has to answer with a response that matches label.BaseResponse.requiredLabelparser/types.ts:363
requiredValue?unknownYou can provide a required value, which makes it so a participant has to answer with that value.BaseResponse.requiredValueparser/types.ts:361
secondaryText?stringThe secondary text that is displayed to the participant under the prompt. This does not accept markdown.BaseResponse.secondaryTextparser/types.ts:353
style?StylesYou can set styles here, using React CSSProperties, for example: {"width": 100} or {"width": "50%"}BaseResponse.styleparser/types.ts:375
stylesheetPath?stringThe path to the external stylesheet file.BaseResponse.stylesheetPathparser/types.ts:373
type"dropdown"--parser/types.ts:611
withDivider?booleanRenders the response with a trailing divider. If present, will override the divider setting in the components or uiConfig.BaseResponse.withDividerparser/types.ts:369
withDontKnow?booleanRenders the response with an option for "I don't know". This counts as a completed answer for the validation.BaseResponse.withDontKnowparser/types.ts:371