Twitter Bootstrap Radio Button Form Inputs

Sun, 04 Mar 2012 00:00:00 +0000

I’ve been loving the Twitter Bootstrap buttons so I came up with a quick technique that turns them into actual working form input elements.

HTML #

Just like a normal Bootstrap Button Group, but with a few added attributes.

<div class="btn-group" data-toggle-name="is_private" data-toggle="buttons-radio">
 <button type="button" value="0" class="btn" data-toggle="button">Public</button>
 <button type="button" value="1" class="btn" data-toggle="button">Private</button>
</div>
<input type="hidden" name="is_private" value="0" />

Note: Yes, nested names like bookmark[is_private] work just fine.

JavaScript #

On document load we apply the button logic and state based on the hidden input’s value.

Bootstrap on Daniel Doezema's Blog

Twitter Bootstrap Radio Button Form Inputs

HTML #

JavaScript #