JSFiddle - React, Tailwind, and code Playground

by Shawn Wood

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="segmented-control" style="width: 100%;">
  <input type="radio" name="sc-1-1" id="sc-1-1-1" checked="" />
  <input type="radio" name="sc-1-1" id="sc-1-1-2" />
  <input type="radio" name="sc-1-1" id="sc-1-1-3" />
  <label class="btn" for="sc-1-1-1" data-value="My Saved">
    My Saved
  </label>
  <label for="sc-1-1-2" data-value="Global">
    Global
  </label>
  <label for="sc-1-1-3" data-value="Shared">
    Shared
  </label>
</div>
<div id="selectedFilter" class="alert alert-info">
test
</div>

CSS

.segmented-control {
  background-color: #f4f4f4;
  color: #000;
  border: 1px solid #f3f3f3;
  border-radius: 0.26em;
}
.segmented-control {
  position: relative;
  display: inline-block;
  border: 1px solid #e3e3e3;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  overflow: hidden;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 0.26em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  -moz-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -o-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -webkit-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -moz-transition-property: none;
  -o-transition-property: none;
  -webkit-transition-property: none;
  transition-property: none;
  -webkit-tap-highlight-color: transparent;
}

.segmented-control>input {
  position: absolute;
  left: -10000px;
  opacity: 0;
}

.segmented-control>input[type='checkbox']~label {
  -moz-transition-duration: 0s;
  -o-transition-duration: 0s;
  -webkit-transition-duration: 0s;
  transition-duration: 0s;
}

.segmented-control>input[type='checkbox']~label:before {
  opacity: 0;
}

.segmented-control>input:disabled:nth-child(1)~label:nth-of-type(1) {
  opacity: 0.3;
  cursor: not-allowed;
}

.segmented-control>input:nth-child(1):checked~label:nth-of-type(1):after,
.segmented-control>input:nth-child(1):checked~label:nth-of-type(1):before {
  opacity:...

JavaScript

var getSelected = function(){
let thisId = $('.segmented-control input[type="radio"]:checked').attr('id'),
      thisValue = $('label[for="' + thisId + '"]').attr('data-value');
    $('#selectedFilter').html(thisValue);
}

$(document).ready(function() {
  getSelected();
  $('.segmented-control input[type="radio"]').on('change', function(event) {
    getSelected();
  });

});