io.select.single

Prompts the app user to select a single value from a set of provided values.

Usage

TypeScript

const currency = await io.select.single("Currency", {
  options: [
    {
      label: "US Dollar",
      value: "USD",
    },
    {
      label: "Canadian Dollar",
      value: "CAD",
    },
    {
      label: "Euro",
      value: "EUR",
    },
  ],
  defaultValue: "USD",
  helpText: "Currency for this transaction",
});

const currencyCode = currency.value;

JavaScript

const currency = await io.select.single("Currency", {
  options: [
    {
      label: "US Dollar",
      value: "USD",
    },
    {
      label: "Canadian Dollar",
      value: "CAD",
    },
    {
      label: "Euro",
      value: "EUR",
    },
  ],
  defaultValue: "USD",
  helpText: "Currency for this transaction",
});

const currencyCode = currency.value;

Python Experimental

currency = await io.select.single(
  "Currency",
  options=[
    {
      "label": "US Dollar",
      "value": "USD",
    },
    {
      "label": "Canadian Dollar",
      "value": "CAD",
    },
    {
      "label": "Euro",
      "value": "EUR",
    },
  ],
  default_value="USD",
  help_text="Currency for this transaction",
)

interval.com

Props

TypeScript

defaultValue

Optional

string | number | boolean | Date | object

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

disabled

Optional

boolean

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

helpText

Optional

string

Secondary label providing additional context for the selection.

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.

description

Optional

string

Secondary label to provide additional context for the option.

image

Optional

object

Image to render alongside the option.

{
  // a URL to the image
  url?: string
  // the image alt tag
  alt?: string
  // the size of the image
  size?: "thumbnail" | "small" | "medium" | "large"
}

imageUrl

Optional

string

Deprecated, replaced with `image.url`.

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.

searchable

Optional

boolean

Whether the select should support filtering options via a search box.

Returns

The selected option.

JavaScript

defaultValue

Optional

string | number | boolean | Date | object

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

disabled

Optional

boolean

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

helpText

Optional

string

Secondary label providing additional context for the selection.

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.

description

Optional

string

Secondary label to provide additional context for the option.

image

Optional

object

Image to render alongside the option.

{
  // a URL to the image
  url?: string
  // the image alt tag
  alt?: string
  // the size of the image
  size?: "thumbnail" | "small" | "medium" | "large"
}

imageUrl

Optional

string

Deprecated, replaced with `image.url`.

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.

searchable

Optional

boolean

Whether the select should support filtering options via a search box.

Returns

The selected option.

Python Experimental

default_value

Optional

str | 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.

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]

searchable

Optional

bool

Whether the select should support filtering options via a search box.

Returns

The selected option

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. A string will be returned if this form is used.

TypeScript

const currencyCode = await io.select.single("Currency", {
  options: ["USD", "CAD", "EUR"],
  defaultValue: "USD",
  helpText: "Currency for this transaction",
});

JavaScript

const currencyCode = await io.select.single("Currency", {
  options: ["USD", "CAD", "EUR"],
  defaultValue: "USD",
  helpText: "Currency for this transaction",
});

Python Experimental

currency_code = await io.select.single(
  "Currency",
  options=["USD", "CAD", "EUR"]
  default_value="USD",
  help_text="Currency for this transaction",
)

Was this section useful?