Allow a user to select multiple options out of a list.

📘

Note

The Multiple-select is comparable to the Radio Select in functionality.

Example usage

async payload => {
  
  const url = await webview.multipleSelect.create({
    ref: 'category',
    title: 'Choose a category',
    eventName: 'select',
    items: [{
      title: 'Audio',
      subtitle: 'Sound, music and noise',
      onSelect: {
        params: new Param('category', 'audio')
      }
    }, {
      title: 'Display',
      subtitle: 'Screen, video and pixels',
      onSelect: {
        params: new Param('category', 'display')
      }
    }, {
      title: 'Camera',
      subtitle: 'Lenses, posture and flashes',
      onSelect: {
        params: new Param('category', 'display')
      }
    }]
  })
  
  const buttons = new Buttons('Select categories')
  buttons.addButton(new Button({
    label: 'Choose categories',
    type: 'webview',
    value: url
  }))

  const message = new Message(`Choose categories ${url}`)
  message.addResponse(buttons)

  return message
}

Properties

Items

The multiple select is based on a number of items. Each individual can contain a title, subtitle, image and onSelect property.

Properties

Example

Item with image

Each item can have a thumbnail associated with it.

📘

Note

Recommended size of the thumbnails is at least 80x80 pixels.

const url = await webview.multipleSelect.create({
  ...
  items: [{
    title: 'Audio',
    image: 'https://...',
    onSelect: {
      eventName: 'select',
      params: new Param('category', 'audio')
    }
  }]
  ...
})

Item with subtitle

Each item can optionally have a subtitle.

const url = await webview.multipleSelect.create({
  ...
  items: [{
    title: 'Audio',
    subtitle: 'Sound, music and noise',
    onSelect: {
      eventName: 'select',
      params: new Param('category', 'audio')
    }
  }]
  ...
})

Item with subtitle and image

You can also combine an item with a subtitle and image.

const url = await webview.multipleSelect.create({
  ...
  items: [{
    title: 'Audio',
    image: 'https://...',
    subtitle: 'Sound, music and noise',
    onSelect: {
      eventName: 'select',
      params: new Param('category', 'audio')
    }
  }]
  ...
})