Schema defines standalone checkbox as mandatory, but asterisk is not rendered.

[joe-oli]

Prerequisites

• [X] I have searched the existing issues
• [X] I understand that providing a SSCCE example is tremendously useful to the maintainers.
• [X] I have read the documentation
• [ ] Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

core

Version

5.x

Current Behavior

Making a standalone checkbox mandatory does NOT render an asterisk. Refer to schema below in 'Steps to reproduce'

Form renders ok, errors shown up when clicking submit button, but no asterisk shows up.

Expected Behavior

Making a standalone checkbox mandatory should render an asterisk, so behavior is consistent across this package.

Steps To Reproduce

This is the schema I am using

const schema: RJSFSchema = {
    title: "User Information", //fieldset-Legend
    type: "object",
    required: ["firstName", "IAgreeCheckbox"], // These fields are mandatory;
    properties: {
      firstName: {
        title: "First Name",
        type: "string",
        minLength: 2,
        maxLength:20,
        pattern: "^[A-Za-z'-]*$"
      },
      age: {
        title: "Age",
        type: "number",
        minimum:18,
        maximum:100
      },
      //single-checkbox:
      IAgreeCheckbox: {
        type: "boolean",
        title: "I Agree with All the above",
        const: true //Must check
      }
    }
  };

/* Field-level error message: Must be equal to constant.

Form-level error message: 'I Agree with All the above' must be equal to constant */

Environment

- OS:Windows 11
- Node: v14.20.0 (not relevant)
- npm: 6.14.17 (not relevant)

Anything else?

It's a basic problem, the library should behave consistently.

[nickgros]

The themes where an asterisk is not shown are:

• core (Bootstrap 3)
• antd
• bootstrap 4
• chakra-ui
• material-ui (v4)

We would accept changes that properly show the asterisk if the theme automatically supports it, but not all themes do. For example Bootstrap 3 doesn't automatically add the style, so if you were using that theme, you would be best served by adding custom CSS to your own project.

[joe-oli]

@nickgros I fail to see how this is theme or CSS related; Before the CSS is applied, the html span with an asterisk has to be rendered?

Here is a simple example of schema to show the contrast.

{
  "title": "User Information",
  "type": "object",
  "required": [
    "checkboxGroup",
    "IAgreeCheckbox"
  ],
  "properties": {
    "checkboxGroup": {
      "title": "Checkbox Group",
      "type": "array",
      "items": {
        "type": "string",
        "enum": [
          "Option 1",
          "Option 2"
        ]
      },
      "uniqueItems": true
    },
    "IAgreeCheckbox": {
      "title": "I Agree with All the above",
      "type": "boolean",
      "const": true
    }
  }
}

The above gets rendered as follows: Note the checkbox group, when made mandatory, renders a span with with asterisk.

<div class="form-group field field-array">
    <label class="control-label" for="root_checkboxGroup">Checkbox Group
        <span class="required">*</span>
    </label>
    <div class="checkboxes" id="root_checkboxGroup">
        <div class="checkbox ">
            <label>
                <span>
                    <input type="checkbox" id="root_checkboxGroup-0" name="root_checkboxGroup"
                        aria-describedby="root_checkboxGroup__error root_checkboxGroup__description root_checkboxGroup__help"
                        value="0">
                    <span>Option 1</span>
                </span>
            </label>
        </div>
        <div class="checkbox ">
            <label>
                <span>
                    <input type="checkbox" id="root_checkboxGroup-1" name="root_checkboxGroup"
                        aria-describedby="root_checkboxGroup__error root_checkboxGroup__description root_checkboxGroup__help"
                        value="1">
                    <span>Option 2</span>
                </span>
            </label>
        </div>
    </div>
</div>

But the single checkbox DOES NOT render a span with asterisk.

<div class="form-group field field-boolean">
    <div class="checkbox ">
        <label>
            <input type="checkbox" id="root_IAgreeCheckbox" name="root_IAgreeCheckbox" required=""
                aria-describedby="root_IAgreeCheckbox__error root_IAgreeCheckbox__description root_IAgreeCheckbox__help">
            <span>I Agree with All the above</span>
        </label>
    </div>
</div>

[nickgros]

@joe-oli You could use CSS to render an asterisk on those fields, but your example makes sense. Feel free to create PRs if you want to improve the existing fields / labels in RJSF