Select Component

For updated documentation on the Select component, refer to the Form.io User Guide.

JSON Schema

The JSON Schema definition for this component is defined as follows.

{
"label": "Select",
"widget": "choicesjs",
"tableView": true,
"data": {
"values": [
{
"label": "A",
"value": "a"
},
{
"label": "B",
"value": "b"
},
{
"label": "C",
"value": "c"
}
]
},
"key": "select1",
"type": "select",
"input": true
}

Core Properties

This component uses the core properties defined within the Common Parameters section.

Specific Properties

Property	Description	Value	Required	Default
dataSrc	Determines which source strategy is used to populate the select drop down, the strategies are provided below.	values, json, url, resource, or custom	true	values
data.values	An array of value objects	Array of value objects, where each item in the array has the following properties. label - The label to show for this value value - The value of this radio input	false	[]
data.json	A JSON object which is a manual entry of the items within the select dropdown list.	Any valid JSON	false
data.url	A url to retrieve data records from using a GET request.	Any valid URL	false
data.resource	A resource Form ID if a resource is to be used as the data source.	A Valid Form ID	false
data.custom	A string that will be executed JavaScript that will determine the values within this select list.	Valid JavaScript which will set a values object which is the values used to populate the select list.	false
valueProperty	The property within each individual record to store as the value of this input. This is useful if each item within the data source list is a complex data object, but you only wish to store a property within that data object as the value of this input.	Any object property. You can use "." to navigate within an object hierarchy.	false
refreshOn	A field within this form that will trigger a refresh of this field once the value of that field changes. This is useful if you have related select inputs that must be filtered based on the selection of another input. For example, the Make and Model dropdowns for automobile.	Any form component api key	false
filter	The filter query to perform on the URL configured for this select list. Handlebar notation is allowed to determine a complex query that needs to be executed.	Any GET request filter string	false
authenticate	Determines is the Form.io JWT token should be sent along with the GET request for an authenticated request.	boolean	false	false
template	The Handlebars template to show in the select text area.	HTML Template. The following variables are provided. item - The full submission object.	true	<span>{{ item.data }}</span>