---
title: "Vega Simple Select Component"
slug: "vega-simple-select-component"
updated: 2025-09-26T04:52:39Z
published: 2025-09-26T04:52:39Z
canonical: "docs.unqork.io/vega-simple-select-component"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Vega Simple Select Component

UDesignerClassic Designer

## Overview

The **Simple Select component** is a Vega (v2.0) [Primary Fields component](/v1/docs/primary-fields-components) that lets end-users select one or more options from a drop-down list. The drop-down list uses a values table, or a data reference key, to display a list of options.

By default, the Simple Select component stays collapsed until the end-user opens it. After making a selection, the list closes again.

You'll find the Simple Select component in the [Primary Fields](/v1/docs/primary-fields-components) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## About the Configuration Window

> To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Settings

#### Field Text

| Setting | Description |
| --- | --- |
| **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |
| **Placeholder Text** | A short prompt telling end-users the expected value of an input field. For example, `Enter your Social Security Number`. Placeholder Text displays inside the input field until the end-user begins an entry. |

[![A static image displaying the Simple Select component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display_thumb_0_0(20).jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display(22).jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)

#### Formatting

| Setting | Description |
| --- | --- |
| **Allow Multiple Selections** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) **(ON)**, end-users can select multiple options from the drop-down. Each time the end-user clicks an option, its added to the field. |
| **Render Select Menu as Portal** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) **(ON)**, in Express View, the search select field is rendered in the HTML body of the DOM. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) **(OFF)**, the Search Select field nests in its parent container. By default this setting is ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) **(ON)**. |

## Data Settings

#### Data Source Type

There are two methods that you can use to populate a Simple Select component: Values and Data Reference Key.

##### **Values**

Selecting Values displays a table where you can enter each option and its value.

[![A static image displaying the Simple Select component's Data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_thumb_0_0(15).jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data(18).jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)

| Setting | Description |
| --- | --- |
| **Key** | Create a key value for targeting the option. For example, if you have three options in your menu, you could assign the following keys: `menu1,` `menu2`, `menu3`. |
| **Option Label** | Enter the text that displays to the end-user. When an end-user clicks the text, the **Action** setting fires. |

##### **Data Reference Key**

Using the Data Reference Key option, data from another component populates the Simple Select component. You'll most often use this option with a [Data Table](/v1/docs/data-table-component) component. After adding you data to the Data Table component, reference the component in your Simple Select component's configuration window.

Think of this as a hybrid option of using Values and Data Collections to populate the Simple Select component. You still use data stored in Unqork, but it's data from your module instead of a [Data Collection](/v1/docs/data-collections).

| Setting | Description |
| --- | --- |
| **Data Reference Key** | Enter the Property ID of the component whose data you're referencing. |
| **Key Property** | Specify the property in the data source to use as the select value. If no value is specified, the item value is used. By default, this setting's value is empty. |
| **Label Property** | This field refers to the option labels to retrieve. If you're retrieving data from a Data Table component, enter the column header in this field. |
| **Adornments Property** | Specify the property that contains the adornments. This setting is optional. |

## Actions Settings

### Events & Operations

[![A static image displaying the Simple Select component's Actions settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actions_thumb_0_0(9).jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actions(10).jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)

| Setting | Description |
| --- | --- |
| **Edit** | Opens the Operations Builder tool. > Discover how to use events and operations in our [Operations Builder](/v1/docs/operations-builder) article. |

## Validation Panel

#### User Input

[![A static image displaying the Simple Select component's Validation settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validation_thumb_0_0(12).jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validation(14).jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)

| Setting | Description |
| --- | --- |
| **Required** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) **(ON)**, the end-user must enter a value in the component's visible fields. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) **(OFF)**, the input is optional. By default, Required is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) **(OFF)**. |
| **Required Error Message** | A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field. |

## Adding a Simple Select Component

Configure a Simple Select component to collect an end-user's education history. You'll configure six options for end-users to select.

> [!NOTE]
> These instructions assume that you have an open module saved with a title.

1. In the Module Builder, drag and drop a Simple Select component onto the canvas.
2. In the Property ID field, enter **educationHistory**.
3. In the Label Text field, enter `What is the highest level of education you've completed?`.
4. Navigate to the **Data** settings.
5. In the **Values** table, enter the following:

|  | Label | Value |
| --- | --- | --- |
| 1 | lessThanHighSchool | Less than High School |
| 2 | highSchoolGED | High School/GED |
| 3 | associatesDegree | Associate's Degree |
| 4 | bachelorsDegree | Bachelor's Degree |
| 5 | mastersDegree | Master's Degree |
| 6 | higherEd | Higher Education |

[![A static image displaying the educationHistory Simple Select component's data settings. The Data Values data is filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/educationHistory_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/educationHistory.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)
6. Navigate to the **Validation** settings.
7. Set Required to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) **(ON)**.
8. Click **Save Component**.
9. **Save** your module.

Preview your module in Express View:

[An animated image displaying the Simple Select component in Express View. The End-User select an option from the drop-down.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Simple_Select_Component_ExpressView(1).webm?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)

## Overview

The **Simple Select component** is a Vega (v2.0) [Primary Fields component](/v1/docs/primary-fields-components) that lets end-users select one or more options from a drop-down list. The drop-down list uses a values table, or a data reference key, to display a list of options.

By default, the Simple Select component stays collapsed until the end-user opens it. After making a selection, the list closes again.

You'll find the Simple Select component in the [Primary Fields](/v1/docs/primary-fields-components) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## About the Configuration Window

> To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Panel

[![A static image displaying the Simple Select component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/displayClassic_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/displayClassic.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)

#### Field Text

| Setting | Description |
| --- | --- |
| **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |
| **Placeholder Text** | A short prompt telling end-users the expected value of an input field. For example, `Enter your Social Security Number`. Placeholder Text displays inside the input field until the end-user begins an entry. |

#### Formatting

| Setting | Description |
| --- | --- |
| **Allow Multiple Selections** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) **(ON)**, end-users can select multiple options from the drop-down. Each time the end-user clicks an option, its added to the field. |
| **Render Select Menu as Portal** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) **(ON)****,** in Express View, the search select field is rendered in the HTML body of the DOM. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) **(OFF)**, the Search Select field nests in its parent container. By default this setting is ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) **(ON)**. |

## Data Panel

[![A static image displaying the Simple Select component's Data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dataClassic_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dataClassic.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)

#### Data Source Type

There are two methods that you can use to populate a Simple Select component: Values and Data Reference Key.

##### **Values**

Selecting Values displays a table where you can enter each option and its value.

| Setting | Description |
| --- | --- |
| **Key** | Create a key value for targeting the option. For example, if you have three options in your menu, you could assign the following keys: `menu1`, `menu2`, `menu3`. |
| **Option Label** | Enter the text that displays to the end-user. When an end-user clicks the text, the **Action** setting fires. |

##### **Data Reference Key**

Using the Data Reference Key option, data from another component populates the Simple Select component. You'll most often use this option with a [Data Table](/v1/docs/data-table-component) component. After adding you data to the Data Table component, reference the component in your Simple Select component's configuration window.

Think of this as a hybrid option of using Values and Data Collections to populate the Simple Select component. You still use data stored in Unqork, but it's data from your module instead of a [Data Collection](/v1/docs/data-collections).

| Setting | Description |
| --- | --- |
| **Data Reference Key** | Enter the Property ID of the component whose data you're referencing. |
| **Key Property** | Specify the property in the data source to use as the select value. If no value is specified, the item value is used. By default, this setting's value is empty. |
| **Label Property** | This field refers to the option labels to retrieve. If you're retrieving data from a Data Table component, enter the column header in this field. |
| **Adornments Property** | Specify the property that contains the adornments. This setting is optional. |

## Validation Panel

[![A static image displaying the Simple Select component's Validation settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validationClassic_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validationClassic.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)

#### User Input

| Setting | Description |
| --- | --- |
| **Required** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) **(ON)**, the end-user must enter a value in the component's visible fields. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) **(OFF)**, the input is optional. By default, Required is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) **(OFF)**. |
| **Required Error Message** | A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field. |

## Adding a Simple Select Component

Configure a Simple Select component to collect an end-user's education history. You'll configure six options for end-users to select.

> [!NOTE]
> These instructions assume that you have an open module saved with a title.

1. In the Module Builder, drag and drop a Simple Select component onto the canvas.
2. In the Property ID field, enter **educationHistory**.
3. In the Label Text field, enter `What is the highest level of education you've completed?`.
4. Navigate to the **Data** settings.
5. In the **Values** table, enter the following:

|  | Label | Value |
| --- | --- | --- |
| 1 | lessThanHighSchool | Less than High School |
| 2 | highSchoolGED | High School/GED |
| 3 | associatesDegree | Associate's Degree |
| 4 | bachelorsDegree | Bachelor's Degree |
| 5 | mastersDegree | Master's Degree |
| 6 | higherEd | Higher Education |

[![A static image displaying the educationHistory Simple Select component's data settings. The Data Values data is filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/educationHistory_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/educationHistory.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)
6. Navigate to the **Validation** settings.
7. Set Required to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D) **(ON)**.
8. Click **Save Component**.
9. **Save** your module.

Preview your module in Express View:

[An animated image displaying the Simple Select component in Express View. The End-User select an option from the drop-down.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Simple_Select_Component_ExpressView(1).webm?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A43Z&se=2026-11-11T03%3A57%3A43Z&sr=c&sp=r&sig=IiWJ%2FxpAPRobFnY5zOn6KgwRtQW2jS9kqfhL%2BhLe%2F%2BU%3D)

## Resource

- [Modify the Simple Select component using the toolbar settings](/v1/docs/component-toolbar-settings).
- [Introduction to Primary Fields](/v1/docs/introduction-to-primary-fields).
- [How to: Use Data Collections in a Dropdown Component](/v1/docs/how-to-use-data-collections-in-a-dropdown-component).
- [Using an Internal API in a Dropdown Component](/v1/docs/how-to-use-an-internal-api-in-a-multi-select-dropdown-component).
- [Using an External API in a Dropdown Component](/v1/docs/how-to-use-an-external-api-in-a-multi-select-dropdown-component).

The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

The Document Object Model (DOM) is the data representation of objects that form the structure and content of a document on the web. The DOM represents the page.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.