ID conflict in between "Send empty value" checkboxes

Q&A (please complete the following information)

• OS: Linux Debian 13
• Browser: firefox
• Version: Zen 1.19.8b (Firefox 149.0.2)
• Method of installation: npm
• Swagger-UI version: 5.32.6
• Swagger/OpenAPI version: OpenAPI 3.1

Content & configuration

Example Swagger/OpenAPI definition:

openapi: 3.1.0
paths:
  /hello:
    post:
      requestBody:
        content:
          application/x-www-form-urlencoded:
            schema:
              properties:
                foo:
                  type: string
                bar:
                  type: string
                  default: ""
                baz:
                  type: string
                  default: ""
              type: object
              required:
                - foo
        required: true

Swagger-UI configuration options: defaults.

Describe the bug you're encountering

An ID conflict between the checkboxes is causing all their labels to only control one. (see screenshot)

To reproduce...

Steps to reproduce the behavior:

1. Load the OpenAPI definition above
2. Expand the /hello endpoint
3. Click 'Try it out'
4. Click on one of the 'Send empty value' labels
5. Click on the other label
6. See that the same checkbox was toggled

Expected behavior

Each label controls the checkbox it is located next to.

Screenshots

Additional context or thoughts

Start by loading the supplied OpenAPI 3.1 definition in Swagger UI and reproducing the two “Send empty value” controls in the form. Search the frontend implementation for that control and inspect how each checkbox and label receives its ID; done means each label toggles only its adjacent checkbox.