starred/documenso

Fork 0

mirror of https://github.com/documenso/documenso.git synced 2026-04-25 05:46:01 +03:00

[GH-ISSUE #2375] Radio Buttons Not Grouping or Displaying Labels #669

New issue

Closed

opened 2026-02-26 18:47:59 +03:00 by kerem · 1 comment

kerem commented

2026-02-26 18:47:59 +03:00

Owner

Originally created by @jeremylynch on GitHub (Jan 12, 2026).
Original GitHub issue: https://github.com/documenso/documenso/issues/2375

Problem

We're trying to create 3 radio buttons that:

Are grouped together (only one can be selected)
Display text labels for each option
Are required fields

However, we're getting:

3 separate radio buttons that can all be selected simultaneously (not grouped)
No text labels displayed
Only empty radio buttons

What We've Tried

Approach 1: Single Radio Field with Values Array

{
  type: "RADIO",
  name: "credit_requirement_selection",
  groupName: "credit_requirement_selection",
  values: [
    { id: 1, value: "Option 1 text", label: "Option 1 text" },
    { id: 2, value: "Option 2 text", label: "Option 2 text" },
    { id: 3, value: "Option 3 text", label: "Option 3 text" }
  ],
  direction: "Vertical",
  required: true,
  readOnly: false
}

Result: Creates 1 radio button with no options/labels

Approach 2: Three Separate Radio Fields with Same Name

[
  {
    type: "RADIO",
    name: "credit_requirement_selection",
    groupName: "credit_requirement_selection",
    buttonId: "credit_option_0",
    label: "Option 1 text",
    value: "Option 1 text",
    required: true
  },
  {
    type: "RADIO",
    name: "credit_requirement_selection",
    groupName: "credit_requirement_selection",
    buttonId: "credit_option_1",
    label: "Option 2 text",
    value: "Option 2 text",
    required: true
  },
  {
    type: "RADIO",
    name: "credit_requirement_selection",
    groupName: "credit_requirement_selection",
    buttonId: "credit_option_2",
    label: "Option 3 text",
    value: "Option 3 text",
    required: true
  }
]

Result: Creates 3 separate radio buttons that can all be selected (not grouped), no labels displayed

API Request We're Sending (Latest Attempt - Single Radio Field with Values Array)

{
  "envelopeId": "envelope_ybuoyhfnblinfyyx",
  "data": [
    {
      "recipientId": 531,
      "envelopeItemId": "envelope_item_edwavvatetrdwskn",
      "type": "RADIO",
      "page": 6,
      "positionX": 4.2,
      "positionY": 15.03,
      "width": 81.52,
      "height": 8.91,
      "groupName": "credit_requirement_selection",
      "required": true,
      "readOnly": false,
      "values": [
        {
          "id": 1,
          "value": "1. The Purchaser does not require credit from any source to be provided for the payment of the motor vehicle, OR",
          "label": "1. The Purchaser does not require credit from any source to be provided for the payment of the motor vehicle, OR"
        },
        {
          "id": 2,
          "value": "2. The Purchaser requires credit to be provided before effect can be given to this Contract and will take reasonable steps themselves to arrange credit without delay. OR",
          "label": "2. The Purchaser requires credit to be provided before effect can be given to this Contract and will take reasonable steps themselves to arrange credit without delay. OR"
        },
        {
          "id": 3,
          "value": "3. The Purchaser requires credit to be provided before effect can be given to this Contract and authorises the Dealer to arrange credit on his/her behalf.",
          "label": "3. The Purchaser requires credit to be provided before effect can be given to this Contract and authorises the Dealer to arrange credit on his/her behalf."
        }
      ],
      "direction": "Vertical"
    }
  ]
}

API Response We're Getting

{
  "data": [
    {
      "type": "RADIO",
      "id": 1921,
      "fieldMeta": {
        "required": false,
        "readOnly": false,
        "fontSize": 12,
        "type": "radio",
        "values": [{"id": 1, "checked": false, "value": ""}],
        "direction": "vertical"
      }
    }
  ]
}

Key Issues:

We send values array with 3 options containing id, value, and label → API returns empty values array with only {"id": 1, "checked": false, "value": ""}
We send required: true → API returns required: false
We send groupName: "credit_requirement_selection" → API ignores it (not in response)
All label/value data is being ignored

Questions

What is the correct way to create grouped radio buttons where only one can be selected?
How do we specify the text labels for each radio button option?
What properties should we use: name, groupName, buttonId, label, value, or values array?
Should we create one radio field with multiple values, or multiple radio fields with the same group name?
Why is required: true being set to false in the response?

Expected Behavior

3 radio buttons displayed vertically
Each radio button has a text label next to it
Only one radio button can be selected at a time (they're grouped)
The field is required
The labels are: "1. Option 1 text", "2. Option 2 text", "3. Option 3 text"

Actual Behavior

3 separate radio buttons that can all be selected
No text labels displayed
Empty radio buttons only
required is set to false despite sending required: true

API Endpoint

POST /envelope/field/create-many

Documentation Reference

https://openapi.documenso.com/reference#tag/envelope-fields/post/envelope/field/create-many

Originally created by @jeremylynch on GitHub (Jan 12, 2026). Original GitHub issue: https://github.com/documenso/documenso/issues/2375 ## Problem We're trying to create 3 radio buttons that: 1. Are grouped together (only one can be selected) 2. Display text labels for each option 3. Are required fields However, we're getting: - 3 separate radio buttons that can all be selected simultaneously (not grouped) - No text labels displayed - Only empty radio buttons ## What We've Tried ### Approach 1: Single Radio Field with Values Array ```ruby { type: "RADIO", name: "credit_requirement_selection", groupName: "credit_requirement_selection", values: [ { id: 1, value: "Option 1 text", label: "Option 1 text" }, { id: 2, value: "Option 2 text", label: "Option 2 text" }, { id: 3, value: "Option 3 text", label: "Option 3 text" } ], direction: "Vertical", required: true, readOnly: false } ``` **Result**: Creates 1 radio button with no options/labels ### Approach 2: Three Separate Radio Fields with Same Name ```ruby [ { type: "RADIO", name: "credit_requirement_selection", groupName: "credit_requirement_selection", buttonId: "credit_option_0", label: "Option 1 text", value: "Option 1 text", required: true }, { type: "RADIO", name: "credit_requirement_selection", groupName: "credit_requirement_selection", buttonId: "credit_option_1", label: "Option 2 text", value: "Option 2 text", required: true }, { type: "RADIO", name: "credit_requirement_selection", groupName: "credit_requirement_selection", buttonId: "credit_option_2", label: "Option 3 text", value: "Option 3 text", required: true } ] ``` **Result**: Creates 3 separate radio buttons that can all be selected (not grouped), no labels displayed ## API Request We're Sending (Latest Attempt - Single Radio Field with Values Array) ```json { "envelopeId": "envelope_ybuoyhfnblinfyyx", "data": [ { "recipientId": 531, "envelopeItemId": "envelope_item_edwavvatetrdwskn", "type": "RADIO", "page": 6, "positionX": 4.2, "positionY": 15.03, "width": 81.52, "height": 8.91, "groupName": "credit_requirement_selection", "required": true, "readOnly": false, "values": [ { "id": 1, "value": "1. The Purchaser does not require credit from any source to be provided for the payment of the motor vehicle, OR", "label": "1. The Purchaser does not require credit from any source to be provided for the payment of the motor vehicle, OR" }, { "id": 2, "value": "2. The Purchaser requires credit to be provided before effect can be given to this Contract and will take reasonable steps themselves to arrange credit without delay. OR", "label": "2. The Purchaser requires credit to be provided before effect can be given to this Contract and will take reasonable steps themselves to arrange credit without delay. OR" }, { "id": 3, "value": "3. The Purchaser requires credit to be provided before effect can be given to this Contract and authorises the Dealer to arrange credit on his/her behalf.", "label": "3. The Purchaser requires credit to be provided before effect can be given to this Contract and authorises the Dealer to arrange credit on his/her behalf." } ], "direction": "Vertical" } ] } ``` ## API Response We're Getting ```json { "data": [ { "type": "RADIO", "id": 1921, "fieldMeta": { "required": false, "readOnly": false, "fontSize": 12, "type": "radio", "values": [{"id": 1, "checked": false, "value": ""}], "direction": "vertical" } } ] } ``` **Key Issues:** - We send `values` array with 3 options containing `id`, `value`, and `label` → API returns empty `values` array with only `{"id": 1, "checked": false, "value": ""}` - We send `required: true` → API returns `required: false` - We send `groupName: "credit_requirement_selection"` → API ignores it (not in response) - All label/value data is being ignored ## Questions 1. What is the correct way to create grouped radio buttons where only one can be selected? 2. How do we specify the text labels for each radio button option? 3. What properties should we use: `name`, `groupName`, `buttonId`, `label`, `value`, or `values` array? 4. Should we create one radio field with multiple values, or multiple radio fields with the same group name? 5. Why is `required: true` being set to `false` in the response? ## Expected Behavior - 3 radio buttons displayed vertically - Each radio button has a text label next to it - Only one radio button can be selected at a time (they're grouped) - The field is required - The labels are: "1. Option 1 text", "2. Option 2 text", "3. Option 3 text" ## Actual Behavior - 3 separate radio buttons that can all be selected - No text labels displayed - Empty radio buttons only - `required` is set to `false` despite sending `required: true` ## API Endpoint `POST /envelope/field/create-many` ## Documentation Reference https://openapi.documenso.com/reference#tag/envelope-fields/post/envelope/field/create-many

kerem

2026-02-26 18:47:59 +03:00

closed this issue
added the
status: triage
label

kerem commented

2026-02-26 18:48:00 +03:00

Author

Owner

@github-actions[bot] commented on GitHub (Jan 12, 2026):

Thank you for opening your first issue and for being a part of the open signing revolution!

One of our team members will review it and get back to you as soon as it possible 💚

Meanwhile, please feel free to hop into our community in Discord

@github-actions[bot] commented on GitHub (Jan 12, 2026): Thank you for opening your first issue and for being a part of the open signing revolution! <br /> One of our team members will review it and get back to you as soon as it possible 💚 <br /> Meanwhile, please feel free to hop into our community in [Discord](https://documen.so/discord)

kerem referenced this issue

2026-02-26 19:31:55 +03:00

[PR #691] [MERGED] feat: add link to homepage on the complete sign page for logged in users #1121

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/documenso#669

No description provided.

Rows
Columns