Select Multiple

io.select.multiple() asks to pick several options and returns their values. The drop-down and the chosen options sit in one frame: each pick is listed under the drop-down, one per row, and the × on its right takes it back. Provided by the @awaitio/select-multiple package.

A Multiple choice frame with the Add… drop-down on top and Email and SMS in rows under it, each with a × on the right

Install

npm install @awaitio/select-multiple

Setup

app.ts

import { selectMultiple } from '@awaitio/select-multiple';

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

Usage

const channels = await io.select.multiple('Tell them by', {
  options: [
    { value: 'email', label: 'Email' },
    { value: 'slack', label: 'Slack' },
    { value: 'sms', label: 'SMS' },
  ],
  defaultValue: ['email'],
  maxSelections: 2,
  helpText: 'Leave it empty to change the role quietly.',
});

Props

Prop	Type	Required	Description
`options`	`{ value, label }[]`	Required	What to choose from, at least one. The drop-down offers those not chosen yet.
`defaultValue`	`string[]`	Optional	The values chosen at the start. Nothing is chosen when left out.
`minSelections`	`number`	Optional	At least this many must be chosen. By default none.
`maxSelections`	`number`	Optional	At most this many may be chosen; the drop-down stops offering more.
`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 channels = await io.select.multiple('Channels', { options: allChannels }).optional();

Returns

string[]: the chosen options’ values, in the order of the options, not the order they were picked.

Built-in validation

The server checks every answer, so a crafted request cannot slip in other values:

When	Message
Fewer than `minSelections`	`<label>: choose at least <minSelections>.`
More than `maxSelections`	`<label>: choose at most <maxSelections>.`
A value that was not offered, or one twice	`<label>: choose from the options only.`

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 channels = await io.select.multiple('Notify by', { options: channelOptions }).validate((channels) => {
  return channels.includes('sms') && !user.phone ? 'Add a phone number before choosing SMS.' : undefined;
});

Getting started

SDK

Components

Display components

Layout components

Context

Select Multiple

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