Question T14505
Visible to All Users

Render Radiobutton Group items as buttons

created a year ago

can with survey js make radio button group appear as button group ??

Answers approved by surveyjs Support

created a year ago

Hello Mohamed,
From what I gather, you want to render a Radio Button group question using square boxes which are used within a button group. If so, you can implement a custom template for Radio Button group questions and render items as your needs dictate.

Please refer to the following demo: Single- and Multi-Select Questions with Custom Item Template. It shows how to implement a custom template for Radiogroup and Checkboxes questions.

Let me know if you have any further questions.

    Show previous comments (4)
    MW MW
    Mohamed wagdy a year ago

      like this1.png2.png

        Mohamed,
        Thank you for the clarification.

        If you wish to render radiogroup as buttons, you can follow the demo I shared earlier and render a button as a radiogroup item template. You can review the renderElement function to learn how an item's content is rendered and modify the code as your needs dictate. For instance, if you don't want to render - / + symbols, simply update the renderElement function and remove the span element which contains an SVG image:

        JavaScript
        class CustomChoiceItem extends ReactSurveyElement { renderElement() { const props = this.props; const question = props.question; const item = props.item; const itemClass = "item-label" + (question.isItemSelected(item) ? " item-label--selected" : ""); const optionType = question.getType() === "radiogroup" ? "radio" : "checkbox"; const handleOnChange = (event) => { question.clickItemHandler(item, event.currentTarget.checked); }; return ( <div role="presentation" className="item-root"> <label className={itemClass}> <input role="option" className="item-input" id={question.getItemId(item)} type={optionType} name={question.questionName} checked={this.isChecked} value={item.value} onChange={handleOnChange} /> <span className="item-text">{item.text}</span> </label> </div> ); } }

        View Demo for React
        Clipboard-File-1.png

        Please feel free to further update the code and apply the required styling to style buttons according to your brand colors.

        I hope this information and demo helps.

        Should you have any further questions, we are here to help.

        Thanks

        P.S. We hope you enjoyed the level of service you received. If so, we would love if you could leave your feedback on SurveyJS page at g2.com. As we’re building our business, every review helps build credibility for future customers and your feedback would be greatly appreciated.

        MW MW
        Mohamed wagdy a year ago

          thanks