Bulma: radio buttons as buttons

radio-buttons-as-buttons.html

<div class="control field m-t-md radio-buttons-as-buttons">
  <label class="label" for="goal_short_or_long_term">Court ou long terme?</label>
  <label class='button'>
    <input type="radio" value="short_term" name="goal[short_or_long_term]" id="goal_short_or_long_term_short_term" />
    Court
  </label>
  
  <label class='button'>
    <input type="radio" value="medium_term" name="goal[short_or_long_term]" id="goal_short_or_long_term_medium_term" />
    Moyen
  </label>

  <label class='button'>
    <input type="radio" value="long_term" checked="checked" name="goal[short_or_long_term]" id="goal_short_or_long_term_long_term" />
    Long
  </label>
</div>

radio-buttons-as-buttons.js

// if you use turbolink, replace DOMContentLoaded by turbolinks:load
document.addEventListener("DOMContentLoaded", function() {
  var inputs = document.querySelectorAll('.radio-buttons-as-buttons input')
  Array.from(inputs).forEach(function(element){
    element.addEventListener('click', function(event){
      // remove is-info to the current active button of this group (if there's one)
      event.target.parentElement.parentElement.querySelectorAll('label').forEach(function(el){el.classList.remove('is-info')})
      // add is-info to the new active
      event.target.parentElement.classList.add('is-info')
    });
  })
});

radio-buttons-as-buttons.scss

.radio-buttons-as-buttons {
  label {
    @extend button
  }

  input {
    display: none;
  }
}