We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Button with isToggle prop true, How can we set some button active by default?

Hi Team, we have a requirement of having some toggle buttons whose initial state will be defined by some flag let's say.

I was looking for something like a checkbox as button, but seems like that is not available in Syncfusion. So I am using toggle button like below -

And it is giving me proper output which is -

But I want to set the initial state, i.e. let's say Tuesday should be selected by default when we are rendering this. So is there any property like isActive or something which can be set to achieve this?

Or if there is any other alternate solution/component which can be used please suggest me the same

5 Replies

YA YuvanShankar Arunagiri Syncfusion Team March 28, 2023 04:37 PM UTC

Hi Animesh,

We have checked your requirement and using the ButtonGroup component, we can achieve your requirement shown in your screenshot. Kindly refer to the below demo and UG link.

Demo link: https://ej2.syncfusion.com/react/demos/#/bootstrap5/button/button-group

UG link: https://ej2.syncfusion.com/react/documentation/button-group/selection-and-nesting#single-selection

 <div id="text" className="e-btn-group">

                                <input type="radio" id="sunday" name="day" value="sunday"/>

                                <label className="e-btn" htmlFor="sunday">Sunday</label>

                                <input type="radio" id="monday" name="day" value="monday"/>

                                <label className="e-btn" htmlFor="monday">Monday</label>

                                <input type="radio" id="tuesday" name="day" value="tuesday" checked/>

                                <label className="e-btn" htmlFor="tuesday">Tuesday</label>

                                <input type="radio" id="wednesday" name="day" value="wednesday"/>

                                <label className="e-btn" htmlFor="wednesday">Wednesday</label>

                                <input type="radio" id="thrusday" name="day" value="thrusday"/>

                                <label className="e-btn" htmlFor="thrusday">Thrusday</label>

                                <input type="radio" id="friday" name="day" value="friday"/>

                                <label className="e-btn" htmlFor="friday">Friday</label>

                                <input type="radio" id="saturday" name="day" value="saturday"/>

                                <label className="e-btn" htmlFor="saturday">Saturday</label>



Using the checked property, we can selected the specific button in initial state.

Output screenshot:

Sample link: https://stackblitz.com/edit/react-1rq42j?file=index.js

Get back to us if you need any further assistance on this. 


YuvanShankar A

AD Animesh Dutta March 29, 2023 05:27 AM UTC

Hey YuvanShankar, 

this will not work for me. I think my requirement was not clear to you.

I need a checkbox type of functionality. And this button group will keep all these buttons stuck together. But that is not what I need. Please check the attached demo to understand how it works.

Code was already attached. Function wise the current implementation is ok. But I can't select a button by default.

Need support for that.


Attachment: Samplle_8072651c.zip

YA YuvanShankar Arunagiri Syncfusion Team March 29, 2023 07:17 AM UTC


Using the ‘e-active’ CSS class name of button component, we can achieve your requirement. kindly refer to the below code snippet and sample link.

<div id='button-control'>

                    <ButtonComponent cssClass='e-outline' isToggle >Sunday</ButtonComponent>

                    <ButtonComponent cssClass='e-outline' isToggle >Monday</ButtonComponent>

                    <ButtonComponent cssClass='e-outline e-active' isToggle >Tuesday</ButtonComponent>

                    <ButtonComponent cssClass='e-outline' isToggle >Wednesday</ButtonComponent>

                    <ButtonComponent cssClass='e-outline' isToggle >Thrusday</ButtonComponent>

                    <ButtonComponent cssClass='e-outline' isToggle >Friday</ButtonComponent>

                    <ButtonComponent cssClass='e-outline' isToggle >saturday</ButtonComponent>


Output screenshot:

Sample link: https://stackblitz.com/edit/react-bjpuve?file=index.js

Get back to us if you need any further assistance on this. 

AD Animesh Dutta March 29, 2023 07:29 AM UTC

instead of manually adding the class, there is no other alternative way to do this? Because during the element creation only we need to set this, also we need to find out the buttons which are active at any time.

Searching with CSS class names may not be accurate. 

YA YuvanShankar Arunagiri Syncfusion Team April 3, 2023 02:05 PM UTC


Sorry for the delay. We have prepared the sample based on your requirement. Using the created and onClick event of button component, we can set the initial selected button using the class name ‘e-active’ and will get the selected button data in click event shown as below.

let initalSelectedBtn = 'tuesday';

    let selectedBtn = [];

    function onCreated(args) {

        if (initalSelectedBtn === args) {

            setTimeout(function() {

                var btn = document.getElementById(args);






    function onClick(args) {

        if(!selectedBtn.includes(args.target.id)) {


        } else {

            selectedBtn.splice(selectedBtn.indexOf(args.target.id), 1);



Sample link: https://stackblitz.com/edit/react-bjpuve-8ttjae?file=index.js

Notes: Using the class name only we get set initial selected state in button component.

Get back to us if you need any further assistance on this. 

Live Chat Icon For mobile
Up arrow icon