# Select

**Select questions** are the easiest way to collect structured data from responders. Unlike text input fields, responders choose from pre-defined options, reducing friction and error. Common use cases include:

* Single- or multiple-choice questions
* Dropdown selections (e.g., U.S. states)
* Image or video-based pickers

***

### Core Settings

<figure><img src="/files/IU0NFV8grP1NsXeSpPIe" alt=""><figcaption></figcaption></figure>

#### Allow multiple selection

Enable this setting to let responders choose more than one answer.

#### Autoadvance if possible

When enabled (default), the flow will automatically advance after the responder selects a choice—**but only if all other questions on the step are already answered**.

{% hint style="info" %}
Autoadvance is disabled when multiple selection is allowed.
{% endhint %}

***

### Customizing choices

<div align="left"><figure><img src="/files/QxpJqLxxRv08krq1IwTz" alt=""><figcaption></figcaption></figure></div>

#### How to add choices

You can populate choices via:

* **Manual entry** in the **Choices** tab
* **Bulk add** from the **Choice library**
* **Dynamically** via external API lookup or local calculation (see below)

#### Randomize choice order

To reduce bias, enable this setting to shuffle the display order each time the step loads.

{% hint style="info" %}
**Pin to position**

When randomization is on, you can **pin** specific choices (e.g., “Other”, “None”) to always appear in the same position.
{% endhint %}

#### Choice value type

By default, values are stored as strings. You can also choose `boolean` or `number` types from the **Choice value type** menu.

#### Customizing individual choices

![exclusive choice](/files/AWk7tyl25J5oTvM30XeP)

Each choice has a:

* **Label** (shown to responder)
* **Value** (stored in submission)

Optional settings include:

* **Show conditionally:** Show the choice only if a condition is met.
* **Exclusive:** Deselect all others if selected (available only when multiple selection is enabled).
* **Disabled:** Prevent selection.
* **Checked by default:** Pre-select this option when the step loads.
* **Description:** Internal-only helper for admins (can be sent in payloads).
* **Media (image/video):** Attach visuals to choices if **Show images on choices** is enabled.

{% hint style="info" %}
You can control the appearance of image/video choices in Theme → Buttons → Select → Image.&#x20;
{% endhint %}

***

### Using the Choice Library

<div align="left"><figure><img src="/files/elnda45zcl43rfJohtZY" alt="" width="319"><figcaption></figcaption></figure></div>

Formsort provides pre-built sets (e.g., U.S. states, Likert scales). Find them at the bottom of the **Choices** tab.\
Want to suggest a new one?

{% hint style="warning" %}
Adding from the choice library will replace/overwrite any existing choices.&#x20;
{% endhint %}

***

### Collecting "Other" responses

To capture custom answers:

1. Add an “Other” option.
2. Add a **Text** question that appears conditionally when “Other” is selected.

***

### Dynamic Choice Loading

Dynamic loading is ideal when choices change frequently or are not known at build time.

<figure><img src="/files/0a3AEu7gRQ0J48w6BkLb" alt=""><figcaption></figcaption></figure>

#### Required format (choice schema)

Choices must follow this structure:

```json
[
  {
    "label": "The first choice", // Displayed to the user
    
    "value": "choice_a",         // Stored in the answers
    
    "disabled": false,           // [Optional]: Whether the choice
                                 // is disabled
                                 
    "imageUrl": "https://..."    // [Optional]: If loading choices
                                 // for a select question with
                                 // images, the URL of the image.
  }
] 

```

#### How to configure

**1. External API**

<figure><img src="/files/iDb4QelGi60WIAmgYMgE" alt=""><figcaption></figcaption></figure>

* Go to **Choices** → **Load choices dynamically** → **External API** → **Define api source**.
* Set the URL for the API.&#x20;
* If the API response doesn’t match the required schema, use a **result mapping function** to transform it.

Learn more in **API answers**.

**2. Local calculation**

<div align="left"><figure><img src="/files/UQinkL2ndHYzXkNJBXnq" alt="" width="563"><figcaption></figcaption></figure></div>

* Choose **Calculated locally** and use TypeScript to generate choices
* The function must `return` an array of objects

```typescript
function myFunction(): IChoice<string>[] { // readonly line
  return [
   {
     label: string, 
     value: string
    } 
  ]
}
```

#### Caclulate locally

When **calculated locally** is enabled, you will be able to use Typescript to output the answers for responder.

You can write any functions you need, but at a minimum, they must return an array of objects that follow the format below.

<div align="left"><figure><img src="/files/22NYBTwgJH1DM3T5yGD4" alt="" width="447"><figcaption><p>Calculated</p></figcaption></figure></div>

{% hint style="success" %}
See [this video](https://drive.google.com/file/d/1FyxvRJIGjnFKwPs1TyUl58rhvd2qDAGg/view?usp=sharing) comparing different approaches to specifying choices for a visual walkthrough.
{% endhint %}

***

## Styling Choices

<figure><img src="/files/g4m6ceSL5dZoiWFWYbvu" alt=""><figcaption></figcaption></figure>

In the **Style** menu, use the **Picker Style** dropdown to choose how choices appear:

* Buttons
* Carousel
* Dropdown
* Native dropdown
* List
* Sliders

{% hint style="info" %}
:bulb: For more style customization details, see [Button Styling](/styling/customizing-appearance/buttons.md).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.formsort.com/adding-questions-and-content/question-reference/select.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.