How to Group Textboxes with Button Using JavaScript ButtonGroup?

This article explains the way to group Textboxes with a button in the middle using the ButtonGroup component. In the below sample, Syncfusion Textboxes with button in the middle are grouped by adding the ‘e-btn-group’ class. The button tag is styled as an EJ2 Button by adding the ‘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');

Refer to the working sample for additional details and implementation: 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

We hope you enjoyed learning how to group textboxes with a button using JavaScript ButtonGroup.

You can refer to our JavaScript ButtonGroup feature tour page to learn 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, BoldDesk Support, or feedback portal. We are always happy to assist you!