Select Single

io.select.single() asks to pick one option from a drop-down and returns its value. Provided by the @awaitio/select-single package.

A Single choice drop-down with Slack chosen, with help text under it

Install

npm install @awaitio/select-single

Setup

app.ts

import { selectSingle } from '@awaitio/select-single';

export const app = new AwaitIO({
  // name, actionsDirectory, theme, secret, users…
  components: { select: { single: selectSingle } },
});

Usage

const role = await io.select.single('New role', {
  options: [
    { value: 'admin', label: 'Admin' },
    { value: 'editor', label: 'Editor' },
    { value: 'viewer', label: 'Viewer' },
  ],
  defaultValue: 'editor',
});

Props

Prop	Type	Required	Description
`options`	`{ value, label }[]`	Required	What to choose from, at least one. The drop-down shows `label`.
`defaultValue`	`string`	Optional	The `value` chosen at the start. Nothing is chosen when left out.
`helpText`	`string`	Optional	Secondary text under the field.
`disabled`	`boolean`	Optional	Shows the starting value without letting it change; the handler gets that value whatever the browser sends.

Optional

The field is required. Chain .optional() to let it stay empty; the handler then gets string | undefined, see Optional fields.

const team = await io.select.single('Team', { options: teams }).optional();

Returns

string: the chosen option’s value.

Built-in validation

The server checks every answer, so a crafted request cannot slip in another value:

When	Message
Nothing chosen	`Choose <label>.`
A value that was not among the options	`<label>: choose one of the options.`

Custom validation

Chain .validate() for a check of your own. It runs on the server after the checks above, gets the value the handler would get and returns a message to show under the field, or nothing when the value is fine; see Custom validation.

const plan = await io.select.single('Plan', { options: plans }).validate((plan) => {
  return plan === 'enterprise' && !account.hasContract ? 'Enterprise needs a signed contract first.' : undefined;
});

Getting started

SDK

Components

Display components

Layout components

Context

Install

Setup

Usage

Props

Optional

Returns

Built-in validation

Custom validation

​Install

​Setup

​Usage

​Props

​Optional

​Returns

​Built-in validation

​Custom validation

Install

Setup

Usage

Props

Optional

Returns

Built-in validation

Custom validation