Navigating Vuforia Studio > Widgets > 2D > Select
What Does This Widget Do?
The Select widget provides a drop-down menu.
When Should I Use This Widget?
Use a Select widget when you want to present the user with a drop-down menu of choices.
Are There Any Special Properties, Services, Events, or Actions?
To view a list of common widget properties, services, and events, see Common Widget Properties, Services, and Events.
The following tables list properties, services, and events that are specific to this widget.
Display Field
Specifies the field that appears in the Select widget. Typically this is the same as the Value Field, but can be different.
This field is automatically populated with options when the widget is bound to ThingWorx data.
List Item Padding
The padding around the list item.
Value Field
Specifies the value field selected using the widget.
This field is automatically populated with options when the widget is bound to ThingWorx data.
The Widget in Action
Here’s an example of what your widget might look like!
Minimum Steps Required for Use
What It Looks Like
1. Drag and drop a Select widget onto the canvas.
2. Enter a label for Select widget in the Label field.
3. From the Data pane, add a service from the entity you wish to retrieve the data from.
4. Bind the All Items or All Selected Items to the Select widget, and choose List on the Select Binding Target window.
5. Select a value for the Display Field property.
6. Select a value for the Value Field property.
Assisted Configuration Fields After Binding ThingWorx Data
After you’ve bound ThingWorx data to the widget some fields are populated with options in a drop-down list. For example, if you bind All Items to the Select widget and select List on the Select Binding Target window, the Value Field and Display Field properties populate with available options.
Style the Widget with CSS
You can use CSS to style the widget! The following is an example of a CSS class you could create and apply:
Keep in mind that it’s best to give your classes unique names so they do not conflict with other classes or OOTB properties.
CSS Example
What It Looks Like
.ptc-select {
border-width: 2px;
border-style: solid;
border-color: rgb(62, 151, 0);
background: rgb(221, 224, 225);
.ptc-select1 {
box-shadow:inset 0 0 10px 0 rgba(0,0,0,0.6);

// the .input-label class within this .ptc-select1 class affects the label of the select widget (alternately can be referenced as the <div> element within the .ptc-select1 class)
.ptc-select1 .input-label{
color: red;

// the <select> element within .ptc-select1 class is the selected value from the list of items
.ptc-select1 select{
color: green;
background-color: rgba(241, 250, 235, 1);

// the .item class (alternately the <option> element) within this .ptc-select1 class applies to the list of options for the drop down list
.ptc-select1 .item{
color: blue;
For more information on implementing CSS classes, see Application Styles.