JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div class="container">
  <div class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
    <label class="btn btn-primary w-100 active">
                <input type="radio" name="options" value="5" id="option1" autocomplete="off"> 5
              </label>
    <label class="btn btn-primary w-100">
                <input type="radio" name="options" value="10" id="option2" autocomplete="off"> 10
              </label>
    <label class="btn btn-primary w-100">
                <input type="radio" name="options" value="15" id="option3" autocomplete="off"> 15
              </label>
    <label class="btn btn-primary w-100">
                <input type="radio" name="options" value="20"id="option4" autocomplete="off"> 20
              </label>
  </div>
</div>
<div class="container">
  <div class="form-group">
    <input id="whatever" class="form-control">
  </div>
</div>

CSS

.container {
  margin-top: 30px;
}

JavaScript

$('input:radio').click(function() {
  $("#whatever").val($(this).val());
});