With Bootstrap, how do I show radio inputs as buttons?
Asked Answered
T

4

31

My form currently contains this code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<label for="opt-0"><input type="radio" name="opt" id="opt-0" checked>Option 0</label>
<label for="opt-1"><input type="radio" name="opt" id="opt-1">Option 1</label>
<label for="opt-2"><input type="radio" name="opt" id="opt-2">Option 2</label>

Instead of showing the radio buttons as radio buttons, I'd like to make them look like regular buttons, like this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">Option 0</button>
<button class="btn btn-default">Option 1</button>
<button class="btn btn-default">Option 2</button>

I have radios and I want to make them look like toggleable buttons. How am I supposed to do that with Bootstrap?

Tobiastobie answered 7/1, 2016 at 15:46 Comment(0)
B
76

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>    
<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>
Berstine answered 7/1, 2016 at 15:58 Comment(8)
This save my day!!!! - replace the old <button> tag in the button group and work perfectly!Galop
@Shibu Thomas, Is it possible to show dropdown sub menu in bootstrap 3?Catharina
@Keynes You can refer this w3schools.com/bootstrap/bootstrap_dropdowns.aspBerstine
@ShibuThomas - thanks, it looks nice. In this implementation there's no indication on the selected option. Do you know how to add it?Wieche
How can we make an option look selected when the form loads? You can do checked="true" - but there's no visual indication it's selected?!Germane
@Wieche Add the 'active' class to the label of the button you want to be selectedDrawl
I find the glow around the selected button not visible enough. Has anybody seen an elegant way of solving this?Lise
But this is not ARIA compliantSemiconductor
D
38

Bootstrap 4 now offers a toggleable button group that manages the active state for you on click.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>    
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>
Drawl answered 14/3, 2018 at 17:39 Comment(3)
Did you try to use bootstrap validation on grouped buttons ? : <div class="invalid-feedback">Example invalid custom file feedback</div> I'm not able to display the error message, on submit, when the input is required. I think because of the wrapped input in label tag. Otherwise, an idea about that ?Abhorrent
People trying to use this with a vue.js v-model, data-toggle="buttons" breaks the binding for me.Exceedingly
This is the best answer. I set the label class to btn btn-outline-primary and that works super well.Cenozoic
F
5
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

jsfiddle-link
getbootstrap

Fair answered 7/1, 2016 at 16:8 Comment(0)
R
1

You could try looking at button groups, this is a goup of - well- buttons... which is toggleable like a radiobutton.

JSFiddle

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/js/bootstrap.min.js"></script>

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Hope this helps!

Rome answered 7/1, 2016 at 15:57 Comment(2)
This could work, but: 1. if I click on a button, it does not remain selected; 2. there are no <input> elements and I can't submit the formTobiastobie
Looked good, until I tried it. The buttons do not stay "toggled", so not what the OP (or me) wantsSchipperke

© 2022 - 2024 — McMap. All rights reserved.