For enums I need to be able to put labels for the enum values

I don’t think this is supported so I need to use a custom component. I want to add these labels to the uischema. What is the best approach?

[original thread by heukoe]

thank you for your question. Please note that most comitters are on vacation until January 7th, we will get back to you in the new year!
best regards

Sadly JSON Schema does not support labels for enums when using the enum keyword, however there is a commonly used workaround using const and oneOf:

  color: {
    type: "string",
    oneOf: [
        const: "b",
        title: "Blue"
        const: "r",
        title: "Red"
        const: "y",
        title: "Yellow"

Using this approach in your JSON Schemas you can write a custom renderer which renders the enum with the desired labels (title) while actually setting the corresponding const values. We would also accept a contribution for such a renderer into JSON Forms if you’d like to contribute.


I am working on an approach to introduce a key and label delimiter in the uischema options. When specified, it will be used to split the key and label from the enum values. It’s an easy adaptation to the existing control, without too much change. Here is a PR:

@sdirix It is still work in progress in terms of adding tests. Please let me know what you think about the approach.

@chavalipraveen Thanks for the suggestion! I left an extensive review on the PR. To keep the discussion contained to one medium I’ll copy parts of the review here:

I looked through the code and noticed the following (please correct me if I’m wrong):

  • Introduction of a ui schema option keyValueDelimiter

  • If present, it will be used to split a given option, e.g. a JSON schema enum into multiple parts

This approach has multiple downsides:

  • The user has to modify their JSON Schema enum values to add the delimiter and label to them and also modify the ui schema to get it rendered in a nice way. The original approach suggested in Spectrum (using a oneOf of const values with title labels) only requires changes on the JSON schema side.

  • By modifying the JSON schema enum values the data object will also need to contain value-delimiter-label as the enum value, otherwise it won’t successfully validate. This is very unexpected. The label on a value should not affect the value itself.

  • Translation support is not possible with this approach without also changing the data values.

So in general I would much prefer the originally suggested approach as this only needs changes on the JSON schema side which after the transformation still describes exactly the same data object.

@chavalipraveen This is now implemented with Add support for enum using OneOf constructs by eneufeld · Pull Request #1591 · eclipsesource/jsonforms · GitHub for React/Material and will be part of the next release.


Thanks a lot @sdirix
this helps!!!