Image Select

The Image Select control allows a user to choose an option from a visually-driven list of items, each with an image.

The Image Select control (also known as a carousel) is an input component that allows a user to select a single option from a horizontal list of choices, where each choice is represented by an image and a title.

When to Use

Use the Image Select control when a visual representation of the options can help the user make a more intuitive and informed decision. It is ideal for:

• Choosing a style or template (e.g., for image or video generation).

• Selecting a product type from a visual catalog.

• Picking a character or avatar.

• Any scenario where the options are best understood visually rather than with text alone.

How to Add

1. From your workflow's Build page, click on + Add Input.

2. Select Image Select from the list of available controls.

Configuration

• Title: The main label for the Image Select component.

• Description: Optional helper text to provide more context.

• Items: This is where you configure the choices for the carousel. For each item, you must provide:

  • Image: Upload an image to represent the option.

  • Title: A short text label that appears below the image.

  • Value: The actual text value that will be passed into the workflow when this option is selected.

• Variable Name: The name used to access the Value of the user's selected item.

• Optional/Required: A toggle to specify if the user must make a selection.

Setting a Default Value

You can pre-select one of the images as the default choice:

1. After configuring all your items, click on the image in the carousel that you want to be the default.

2. Click the settings icon (⚙️) at the bottom right of the control.

3. Select Set Current Value as Default.

Accessing the Value

You access the Value of the selected item using its variable name. For example, if you have an item with Title: "Vintage" and Value: "vintage_style_v1" and the variable name is image_style, the value of {{image_style}} will be vintage_style_v1.

Example

Goal: Allow a user to select a visual style and then generate an image using that style.

1. Add an Image Select Control:

   • Title: "Select Image Style"

   • Variable Name: selected_style

   • Items:

     • Item 1: Image of a futuristic city, Title: Futuristic, Value: cyberpunk, futuristic, neon lights

     • Item 2: Image of a watercolor painting, Title: Watercolor, Value: watercolor art style, soft, blended colors

     • Item 3: Image of a cartoon drawing, Title: Cartoon, Value: bold lines, vibrant colors, cartoon style

2. Add a Text Input:

   • Title: "Image Subject"

   • Variable Name: subject

3. Add an OpenAI MCP Node (DALL-E):

   • Action: Create Image

   • Prompt: A high-quality image of a {{subject}} in the following style: {{selected_style}}

When the user runs this workflow, they can click on one of the style images, and the corresponding value (e.g., "cyberpunk, futuristic, neon lights") will be inserted into the DALL-E prompt.