Create Input with Button? (Input Group in Bootstrap)

First, bravo on creating such a beautiful framework! As a huge fan of AngularJS and mobile development, I’ve been rolling my own tools. Now, I don’t have to! I look forward to helping out with this project and contributing in the coming months. But, I need to get acquainted with the project first…

How can I create an input with a button? In Bootstrap this is .input-group-addon seen here:

Thanks again!

(I added this question to tutorials because I just realized that questions that aren’t categorized don’t show up).

Hey @jprichardson. Right now it’s not built in. However, I just filed an issue ( and hopefully @adam will be able to get this in since it’s something we planned on doing.

One quick solution would be to use the grid, like this maybe:

<div class="row">
  <div class="col-75">
  <div class="col-25">
    <button class="button button-assertive">Click</button>

Actually, as a short-term solution, I just experimented with just placing the icon in the label. It’s not ideal, but it at least looks acceptable:

<label class="item item-input">
  <input type="text" placeholder="First Name">
  <i class="icon ion-email"> 

… and then I can add a click handler to the icon.

Does this help?

Also added this:

1 Like

That’s awesome! I can’t wait to try it! Thanks!

This is useful, but not nearly is clean and efficient (w/screen real estate) as the bootstrap approach. Is there something in the Ionic Framework that prevents a closer match to the bootstrap design of input groups? Their icons, buttons and dropdowns as addons appear much more tightly integrated into the input. Thoughts?

1 Like