Select

The Select component displays a list of values in a dropdown list where users can select one of the values. This component has flexibility on where the data source originates from and offers multiple settings for filtering, querying, and loading data values.

Unique Settings: Data Source Types | Field Examples | Guidance | JSON

Widget Type: Change the Select dropdown widget type:

  • Choices.js
  • HTML 5

Unique Options: Display only unique dropdown options, removing repeated values.

Multiple Values: Allows users to select more than one option. Selected options appear as tags.

Data Source Type: The source to use for the Select component options:

  • Values
  • URL
  • Resource
  • Raw JSON
  • Custom

Storage Type: Determines how field data is stored. Defaults to Autotype unless specified:

  • String
  • Number
  • Boolean
  • Object

ID Path: Designates the path to select the option ID.

Item Template: Defines how Select options appear in the dropdown. Example: {{ item.value }}.

Lazy Load Data: Delays API requests until the control is in focus to improve performance.

Request Headers: Adds authentication or other headers to API requests.

Data Path: The property in the source data where items reside (e.g., results.items).

Value Property: Determines which data property is stored when an item is selected.

Disable Limiting Response: Prevents automatic limit and skip parameters in requests.

Search Query Name: Specifies the search query string parameter for filtering API results.

Search Delay Request: Sets a delay (default: 0.3s) before sending search requests.

Filtering and Sorting:

  • Filter Query: Additional filtering parameters.
  • Sort Query: Sorts results by submission values.
  • Skip and Sort: Example: skip=10&sort=created.
  • Limit: Restricts the number of results retrieved per request.

Authentication and Caching:

  • Formio Authenticate: Uses Formio authentication.
  • Disable Caching: Prevents storing request results for up-to-date data.

Dynamic Refreshing:

  • Refresh Options On: Refreshes field options when another field changes.
  • Refresh Options On Blur: Refreshes when the field loses focus.
  • Clear Value Option On Refresh: Clears selected values when refreshing.

Search and Read-Only Settings:

  • Enable Static Search: Allows searching within the static item list.
  • Search Threshold: Adjusts how strict search matches should be (default: 0.3).
  • Read Only Value: Displays value only in Read-Only mode.

Choices.js Options: Defines a raw JSON object for configuring the Select component.

Use Exact Search: Disables fuzzy searching, requiring exact matches.