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?