Skip to main content
Big news! Interval has been acquired by Meter. Learn more →

io.select.single

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

Usage​

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;
interval.com

Props​

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. Supports inline markdown elements like bold, italics, and links.

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

OptionalNew in 0.33.0

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.

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.

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