Skip to main content

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

string | number | boolean | Date | object Optional

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

disabled

boolean Optional

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

helpText

string Optional

Secondary label providing additional context for the selection.

options

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

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

description

string Optional

Secondary label to provide additional context for the option.

image

object OptionalNew in 0.33.0

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

string Optional

Deprecated, replaced with `image.url`.

label

string | number | boolean | Date Required

Display label for this particular possible option.

value

string | number | boolean | Date Required

Value for this particular possible option.

searchable

boolean Optional

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