Skip to content

Docs should have examples for radio / select / checkboxes using oneOf and const instead of enum and enumNames #1754

@jnachtigall

Description

@jnachtigall

Prerequisites

Description

The docs seem to concentrate on using enum and json-schema non-compliant enumNames for creating radio, select or checkboxes. A compliant way seems to be to use oneOf (anyOf) and const

Would be great if there were some examples for this like the following:

    radioExample: {
      type: "number",
      title: "radio title",
      description: "Using const",
      oneOf: [
        { const: 1, title: "One" },
        { const: 2, title: "2" },
        { const: 3, title: "Three" }
      ]
    },
    radioExample2: {
      type: "number",
      title: "radio2 title",
      description: "Using enum",
      oneOf: [
        {
          type: "number",
          title: "One",
          enum: [1]
        },
        {
          type: "number",
          title: "2",
          enum: [2]
        },
        {
          type: "number",
          title: "Num 3",
          enum: [3]
        }
      ]
    },

and

const uiSchema = {
  radioExample: {
    "ui:widget": "radio",
  },
  radioExample: {
    "ui:widget": "radio",
  }
};

Using something like this can be preferred as it as a clear value attribute whereas the enums alone can result in special characters in the value in the html.

Same for checkboxes where an example like the following would be great:

    "selectboxesExample2": {
      "title": "Select-Boxes (Multi-Select with several checkboxes) Titel",
      "type": "array",
      "uniqueItems": true,
      "items": {
        "type": "number",
        "anyOf": [
          {
            "const": 1,
            "title": "One"
          },
          {
            "const": 2,
            "title": "2"
          },
          {
            "const": 3,
            "title": "Three"
          }
        ]
      }
    },

const uiSchema = {
  selectboxesExample: {
    "ui:widget": "checkboxes"
  }
}

at the moment there's only this as example

    selectboxesExample: {
      type: "array",
      title: "Select boxes, that is multiple checkboxes",
      items: {
        type: "string",
        enum: [
          "A Checkbox1",
          "A Checkbox2",
          "A Checkbox3",
          "A Checkbox4"
        ]
      },
      uniqueItems: true
    }

These should be in the docs somewhere I could only find these in the PR at #581 Especially, with const I find the schema very readable and clear.

PS
what I find strange is that there's no working example for using oneOf (or anyOf) using a select dropdown. This renders as number, but maybe I am doing it wrong:

    "selectExample": {
      "title": "Should render a Select Dropdown but renders a Number widget",
      "type": "array",
      "uniqueItems": true,
      "items": {
        "type": "number",
        // could also be "oneOf":
        "anyOf": [
          {
            "const": 1,
            "title": "One"
          },
          {
            "const": 2,
            "title": "2"
          },
          {
            "const": 3,
            "title": "Three"
          }
        ]
      }
    },

EDIT: Forget the PS part. It works with (although, which should also be added to the docs):

      "selectExample": {
        "title": "a select with const",
        "type": "number",
        "oneOf": [
          {
            "const": 1,
            "title": "One"
          },
          {
            "const": 2,
            "title": "2"
          },
          {
            "const": 3,
            "title": "Three"
          }
        ]
      },

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions