How to Group Textboxes with Button Using JavaScript ButtonGroup?

This knowledge base explains the way to group Textboxes with button in middle using ButtonGroup component. In the below sample, Syncfusion Textboxes with button in middle are grouped by adding ‘e-btn-group’ class. The button tag is styled as EJ2 Button by adding ‘e-btn’ class.

HTML

<div class="e-btn-group col-12 col-md-10">
    <input id="input1" />
    <button class="e-btn" type="button">...</button>
    <input id="input2" />
</div>
 
<style>
    /*To customize the input element*/
    .e-btn-group input {
        opacity: 1;
        position: relative;
    }
 
    /*To customize the border for left TextBox*/
    .e-btn-group .e-input-group:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    /*To customize the border for right TextBox*/
    .e-btn-group .e-input-group:last-child {
        border-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    
    /*To customize the input width*/
    .e-custom.e-input-group {
        width: 40%;
    }
</style>

TS

import { TextBox } from '@syncfusion/ej2-inputs'
 
// e-custom class added in cssClass to customize the width of TextBox
let inputobj: TextBox = new TextBox({cssClass: 'e-custom'});
inputobj.appendTo('#input1');
 
inputobj = new TextBox({});
inputobj.appendTo('#input2');

Sample Link: https://stackblitz.com/edit/vccz48-5xtstg?file=index.html

You can check the below demo and documentation link to know more about ButtonGroup CSS component,

https://ej2.syncfusion.com/demos/#/bootstrap5/button/button-group.html

https://ej2.syncfusion.com/documentation/button-group/getting-started

Conclusion

​I hope you enjoyed learning on how to group textboxes with button using JavaScript ButtonGroup.

​You can refer to our JavaScript ButtonGroup feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript ButtonGroup example to understand how to create and manipulate data.

​For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

​If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!