Skip to main content

Multiple Choice

JSON Forms supports different multiple-choice options. It is possible to configure a single select, where only one option can be selected, or a multi select, where several options can be selected.

Single Select​

A single select can be achieved by using an enum or an oneOf in the JSON schema.

Enum​

You can define an enum in your schema like this:

plainEnum: {
  type: 'string',
  enum: ['foo', 'bar', 'foobar']
}

One Of​

With the use of oneOf, you can also add the title option. You can define an enum in your schema like this:

oneOfEnum: {
  type: 'string',
  oneOf: [
    {
      const: 'foo',
      title: 'Foo'
    },
    {
      const: 'bar',
      title: 'Bar'
    },
    {
      const: 'foobar',
      title: 'FooBar'
    }
  ]
}

Radio Button​

Both enum and oneOf support the option to use radio buttons instead of a dropdown. You can use them by using the format option in the UI Schema:

{
  type: "Control",
  scope: "#/properties/radioGroup",
  options: {
    format: "radio"
  }
}

Autocomplete Option​

There is also the option to use the autocomplete renderer. The autocomplete renderer is available for data of type enum and oneOf and is rendered by using the autocomplete option in the UI schema:

{
  type: "Control",
  scope: "#/properties/autocompleteEnum",
  options: {
    autocomplete: true
  }
}

Note: For JSON Forms < 3.0 this renderer is only available in the extended React Material renderer set (extendedMaterialRenderers). The renderer set can be imported from @jsonforms/material-renderers/extended . This renderer set requires the @material-ui/lab peer dependency.

Multi Select​

There are again two different ways to define the enum.

Enum​

JSON forms will render a multi select if you define an Array of enums with the uniqueItems option set to true in your JSON schema like in the example below.

multiEnum: {
  type: "array",
  uniqueItems: true,
  items: {
    type: "string",
    enum: [
      "foo",
      "bar",
      "foobar"
    ]
  }
}

One Of​

JSON forms will render a multi select if you define an Array of oneOfs with the uniqueItems option set to true in your JSON schema like in the example below.

oneOfMultiEnum: {
  type: 'array',
  uniqueItems: true,
  items: {
    oneOf: [
      { const: 'foo', title: 'My Foo' },
      { const: 'bar', title: 'My Bar' },
      { const: 'foobar', title: 'My FooBar' }
    ]
  }
}

Localization​

For how to localize the enum, have a look at our localization guide.