Image Picker

Image picker (image chooser) is a question type that displays multiple images or videos and allows users to select one or more items. This demo shows how to configure an image chooser survey question in your JavaScript framework.

To create an image chooser question, define an object with the type property set to "imagepicker" and add it to the elements array. Use the choices array to specify choice values. Each object in this array should have the following structure:

{
  "value": any, // A value to be saved in the survey results
  "text": String, // A display text (label). When `text` is undefined, `value` is used. 
  "imageLink": String // A link to the image or video that represents this choice value.
}

If you want to load choice values from a RESTful service, use the choicesByUrl property instead. Refer to the ChoicesRestful object for information on how to configure this property. The demo on this page defines local choices.

Image picker questions can display explanatory labels under images. Label texts are taken from the text property of choice objects or from the value property if text is undefined. To display image labels, enable the showLabel property.

This demo allows you to select more than one image. To enable this behavior in your application, set the multiSelect property to true. With this setting, the question value contains an array of selected choice values instead of a single value.

You can also use the image chooser question as a video picker. Set the contentMode property to "video" to display videos instead of static images. This example does not demonstrate the video picker mode.

Image Picker questions can be used to build a layout in which selectable images have input fields attached to them. This layout allows survey creators to request additional information about a product or service illustrated by the selected image. For more information about this use case, refer to the following demo:

View "Calculator Forms for E-commerce" Demo