Allow a user to make a selection out of a list of options.

Example usage

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

  const message = new Message(`Select a category ${url}`)
  message.addResponse(buttons)

  return message
}

Properties

Items

The radio 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. By default, this image is square pixels.

📘

Note

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

const url = await webview.radioSelect.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.radioSelect.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.radioSelect.create({
  ...
  items: [{
    title: 'Audio',
    image: 'https://...',
    subtitle: 'Sound, music and noise',
    onSelect: {
      eventName: 'select',
      params: new Param('category', 'audio')
    }
  }]
  ...
})