Search code examples
buttontwitter-bootstrap-3radio-groupbuttongroup

How to make a button group work like a radio button group?


I'm using Bootstrap 3 and I want to make two buttons work as Radio Buttons, but I can't figure out how. Here goes my code

<div class="btn-group" >
    <div class="btn-group">
        <button type="button" class="btn btn-default">
            PERSONAL
        </button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">
            COMPANY
        </button>
    </div>
</div>

When I select PERSONAL, the other one is deselected (as it should), but the problem is:

  • None of them are active when the form is started
  • I can deselect both clicking out of the form

Solution

  • <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> Option 1
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> Option 2
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option3"> Option 3
      </label>
    </div>
    

    And initialize with js after: Enable buttons via JavaScript:

    $('.btn').button()
    

    You can make one of it active adding "active" class to label - "btn btn-primary active" and "checked" to input radio.