Multi-select

Add a multi-select input to your app to allow users to select multiple values from a list of options.

#Options

Multi-select options can be added manually or pulled from a remote source. The input ID in the URL template for your multi-select input is replaced with the selected option’s values.

#Manual Options

Select the "manual" options type, then add options to your multi-select input and set a default option.

#Remote Options

Select the "remote" options type, then specify the options URL and any required headers. The API must return a JSON response in the following format.

[
  {
    "label": "my label",
    "value": "my-value",
  },
  {
    "label": "my second label",
    "value": "my-second-value",
  }
]

A default option can be set by setting default to true for any given option.

[
  {
    "label": "my label",
    "value": "my-value",
  },
  {
    "label": "my second label",
    "value": "my-second-value",
    "default": true
  },
  {
    "label": "my third label",
    "value": "my-third-value",
    "default": true
  }
]

#Request Format

The array of options are JSON stringified and URI encoded when injecting into your app's URL template.

URL Template

...?myQueryParameter=:multiSelectInputId

URL

...?myQueryParameter=%5B%22option-a%22%2C%22option-b%22%5D

Make sure to parse the query parameter in your app code.

App Code

const { myQueryParameter } = getQueryParams();

const multiSelectOptions = JSON.parse(myQueryParameter)
// [ 'option-a', 'option-b' ]

#Validation

The multi-select input supports the following validation options:

• Required: Prevent your app from rendering until an input value is provided.

#Appearance

Add helper text to provide helpful context or link to a support article for additional instructions.

#Next Steps

• Check out the Select input
• Check out the Button Group input
• Browse the available input types

---