How to add multi select dropdown

[original thread by Naushad Rahman]

Hi. Thanks for your interest in JSON Forms!

We don’t provide a multi-select dropdown out of the box but you can implement this on your own using a custom renderer. There are many approaches to this. For example on the schema side you could use an array of strings like this:

type: 'array',
uniqueItems: true,
maxItems: 3,
minItems: 3,
items: {
  enum: ['Enum1', 'Enum2', 'Enum3', 'Enum4', 'Enum5']

Now register your own renderer for this element. Within the renderer you could use Material Ui’s Select which supports multi-selection. See this tutorial on how to implement and register an own renderer.


I have tried the given snippet in Angular with Angular-Material. It doesn’t works well. Can you please provide any samples for rendering multi-select dropdown using angular-material.

Hi @ashwininfant(ashwininfant), at the moment we don’t provide a multi-select dropdown for any renderer set. The schema posted above was a suggestion on how I would model the JSON Schema side for such a control. So you’ll need to implement a custom renderer for this. If you do so and would like to contribute we’ll definitely take a look.