io.select.multiple

Prompts the app user to select any number of values from a set of provided values.

Usage

TypeScript

const condiments = await io.select.multiple("Condiments", {
  options: [
    {
      label: "Ketchup",
      value: 0,
    },
    {
      label: "Mustard",
      value: 1,
    },
    {
      label: "Mayo",
      value: 2,
    },
  ],
  defaultValue: [
    {
      label: "Ketchup",
      value: 0,
    },
    {
      label: "Mustard",
      value: 1,
    },
  ],
  helpText: "What goes on it?",
});

const condimentIds = condiments.map(condiment => condiment.value);

JavaScript

const condiments = await io.select.multiple("Condiments", {
  options: [
    {
      label: "Ketchup",
      value: 0,
    },
    {
      label: "Mustard",
      value: 1,
    },
    {
      label: "Mayo",
      value: 2,
    },
  ],
  defaultValue: [
    {
      label: "Ketchup",
      value: 0,
    },
    {
      label: "Mustard",
      value: 1,
    },
  ],
  helpText: "What goes on it?",
});

const condimentIds = condiments.map(condiment => condiment.value);

interval.com

Props

TypeScript

defaultValue

Optional

(string | object)[]

Default preselected options. Must be a subset of `options`.

label

Required

string | number | boolean | Date

Display label for this particular possible option.

value

Required

string | number | boolean | Date

Value for this particular possible option.

disabled

Optional

boolean

Whether the input is disabled, preventing changes from the `defaultValue`.

helpText

Optional

string

Secondary label providing additional context for the selection. Supports inline markdown elements like bold, italics, and links.

maxSelections

Optional

number

Maximum number of selected values accepted for submission.

minSelections

Optional

number

Minimum number of selected values required for submission, defaults to 0.

options

Required

(string | number | boolean | Date | object)[]

Array of possible values to be selected. Can be an array of primitive values, or provide objects for more advanced customization.

label

Required

string | number | boolean | Date

Display label for this particular possible option.

value

Required

string | number | boolean | Date

Value for this particular possible option.

Returns

A subset of the provided options.

JavaScript

defaultValue

Optional

(string | object)[]

Default preselected options. Must be a subset of `options`.

label

Required

string | number | boolean | Date

Display label for this particular possible option.

value

Required

string | number | boolean | Date

Value for this particular possible option.

disabled

Optional

boolean

Whether the input is disabled, preventing changes from the `defaultValue`.

helpText

Optional

string

Secondary label providing additional context for the selection. Supports inline markdown elements like bold, italics, and links.

maxSelections

Optional

number

Maximum number of selected values accepted for submission.

minSelections

Optional

number

Minimum number of selected values required for submission, defaults to 0.

options

Required

(string | number | boolean | Date | object)[]

Array of possible values to be selected. Can be an array of primitive values, or provide objects for more advanced customization.

label

Required

string | number | boolean | Date

Display label for this particular possible option.

value

Required

string | number | boolean | Date

Value for this particular possible option.

Returns

A subset of the provided options.

Examples

String options

The options property can also be an array of strings, which is equivalent to objects with identical label and value properties with the string values. Strings will be returned if this form is used.

TypeScript

const condimentNames = await io.select.multiple("Condiments", {
  options: ["Ketchup", "Mustard", "Mayo"],
  defaultValue: ["Ketchup", "Mustard"],
  helpText: "What goes on it?",
});

JavaScript

const condimentNames = await io.select.multiple("Condiments", {
  options: ["Ketchup", "Mustard", "Mayo"],
  defaultValue: ["Ketchup", "Mustard"],
  helpText: "What goes on it?",
});

Did this section clearly explain what you wanted to learn?