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);

Python Experimental

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

condiment_ids = [condiment.value for condiment in condiments]

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.

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.

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.

Python Experimental

default_value

Optional

Iterable[string | DefaultSelectOption]

Default preselected option. Must be one of the items in `options`.

PrimitiveValue = str | int | float | bool | date | time | datetime

class DefaultSelectOption(TypedDict):
    label: PrimitiveValue
    value: PrimitiveValue

disabled

Optional

bool

Whether the input is disabled, preventing edits to the default value.

help_text

Optional

str

Secondary label for providing additional context.

max_selections

Optional

int

Maximum number of selected values accepted for submission.

min_selections

Optional

int

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

options

Optional

Iterable[PrimitiveValue | SelectOption]

Iterable of possible values to be selected. Can be an array of primitive values, or provide a dict for more advanced customization.

PrimitiveValue = str | int | float | bool | date | time | datetime

class ImageSchema(TypedDict):
    url: NotRequired[str]
    alt: NotRequired[str]
    size: NotRequired[Literal["thumbnail", "small", "medium", "large"]]

class SelectOption(TypedDict):
    label: PrimitiveValue
    value: PrimitiveValue
    description: NotRequired[str]
    image: NotRequired[ImageSchema]

Returns

List of the selected 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?",
});

Python Experimental

condiment_names = await io.select.multiple(
  "Condiments",
  options=["Ketchup", "Mustard", "Mayo"],
  default_value=["Ketchup", "Mustard"],
  help_text="What goes on it?",
)

Did this section clearly explain what you wanted to learn?