Placing a checkbox in an input addon bootstrap

Question

I am trying to place a checkbox within an input group addon whilst using a bootstrap 3 form. The checkbox is to show password on a sign in form.

<form class="form-signin">
    <h1 class="form-signin-heading" align="center"><strong>Owner Gateway</strong></h1>

    <input type="text" class="form-control" placeholder="Username" required autofocus></input>

    <div class="wrapper">
        <div class="input-group" style="width: 100%">
            <input type="text" class="form-control" placeholder="Password"/>
            <span class="input-group-addon">Show</span>
        </div>
    </div>

        <button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
        <button class="btn btn-lg btn-primary btn-block" id="new-btn" type="submit">Stay Logged in</button>
    </div>
</form>

If anyone could help, I would be very grateful.

Solution

<div class="input-group" style="width: 100%">
    <input type="text" class="form-control" placeholder="Password"/>
    <span class="input-group-addon"><input type="checkbox"> Show</span>
</div>

Just try simply that.

Comments

[totneschap]

thanks for the answer, it almost worked but for some reason the 'input-group-addon' is now twice the height of the 'input-group', any ideas?

[bmoran]

I was so close. I put form-control class on the checkbox in the input-group-addon.