An input group with a checkbox:
<%= input input => { text_field => ['username'] }, prepend => { check_box => ['agreed'] } %>
<div class="input-group"> <span class="input-group-addon"><input name="agreed" type="checkbox" /></span> <input class="form-control" id="username" type="text" name="username" /> </div>
A large
input group with a radio button prepended and a string appended:
<%= input large, prepend => { radio_button => ['yes'] }, input => { text_field => ['username'] }, append => '@' %>
<div class="input-group input-group-lg"> <span class="input-group-addon"><input name="yes" type="radio" /></span> <input class="form-control" id="username" type="text" name="username" /> <span class="input-group-addon">@</span> </div>
An input group with a button:
<%= input input => { text_field => ['username'] }, append => { button => ['Click me!'] }, %>
<div class="input-group"> <input class="form-control" id="username" type="text" name="username" /> <span class="input-group-btn"><button class="btn btn-default" type="button">Click me!</button></span> </div>
An input group with a button dropdown appended. Note that right
is manually applied:
<%= input input => { text_field => ['username'] }, append => { buttongroup => [['The button', caret, right, items => [ ['Item 1', ['item1'] ], ['Item 2', ['item2'] ], [], ['Item 3', ['item3'] ], ] ] ] } %>
<div class="input-group"> <input class="form-control" id="username" type="text" name="username" /> <div class="input-group-btn"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">The button <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right"> <li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li> <li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li> <li class="divider"></li> <li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li> </ul> </div> </div>
An input group with a split button dropdown prepended:
<%= input input => { text_field => ['username'] }, prepend => { buttongroup => [ buttons => [ ['Link 1', ['http://www.example.com/'] ], [undef, caret, items => [ ['Item 1', ['item1'] ], ['Item 2', ['item2'] ], [], ['Item 3', ['item3'] ], ], ], ], ], }, %>
<div class="input-group"> <div class="input-group-btn"> <a class="btn btn-default" href="http://www.example.com/">Link 1</a> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a class="menuitem" href="item1" tabindex="-1">Item 1</a></li> <li><a class="menuitem" href="item2" tabindex="-1">Item 2</a></li> <li class="divider"></li> <li><a class="menuitem" href="item3" tabindex="-1">Item 3</a></li> </ul> </div> </div> <input class="form-control" id="username" type="text" name="username" /> </div>