Is it possible to have a button radio group with an input group?

Question

I would like to know if its possible to create a bootstrap radio btn-group to addon to an input-group?

I know it is possible to create something like my snippet code shows, but I would like to create it where the two radio buttons are hidden and styled like the ones in the image below shows:

I would like them to be actual radio buttons since its standard practice to choose either. I dont want them to just be buttons.

I have tried to style the radio buttons like the image but its not working correctly for me, so any help will be great.

Thanks.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="input-group">
        <!-- class="input-group-addon" -->
        <input type="text" class="form-control" placeholder="some info here" aria-label="text input checkbox">
        <span class="input-group-addon">
        <input type="radio" aria-label="checkbox inside input group"> Female</span>
        <span class="input-group-addon">
        <input type="radio" aria-label="checkbox inside input group"> Male</span>

      </div>
    </div>
  </div>
</div>

Answer 1

You can try this, it seems to accomplish what your question is about.

You can just swap out btn-group with input-group-btn See Multiple Button Groups

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
  <div class="row">
    <div class="col-md-6">

      <div class="input-group">

        <input type="text" class="form-control" placeholder="Hello">

        <div class="input-group-btn" data-toggle="buttons">
          <label class="btn btn-primary active">
            <input type="radio" name="options" id="option1" autocomplete="off" checked>Radio 1
          </label>
          <label class="btn btn-primary">
            <input type="radio" name="options" id="option2" autocomplete="off">Radio 2
          </label>
          <label class="btn btn-primary">
            <input type="radio" name="options" id="option3" autocomplete="off">Radio 3
          </label>
        </div>

      </div>

    </div>
  </div>
</div>
<hr>