Using multiple buttons in place of radio?

help
1

I’m attempting to swap out some radio inputs for button inputs:

So instead of this:

div class="mdl-cell mdl-cell--9-col">
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect rating-radio" for="option-1">
      <input type="radio" id="option-1" class="mdl-radio__button" name="options1" value="1" checked />
      <span class="mdl-radio__label">Red</span>
    </label>
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect rating-radio" for="option-2">
      <input type="radio" id="option-2" class="mdl-radio__button" name="options1" value="2" />
      <span class="mdl-radio__label">Amber</span>
    </label>
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect rating-radio" for="option-3">
      <input type="radio" id="option-3" class="mdl-radio__button" name="options1" value="2" />
      <span class="mdl-radio__label">Green</span>
    </label>
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect rating-radio" for="option-4">
      <input type="radio" id="option-4" class="mdl-radio__button" name="options1" value="2" />
      <span class="mdl-radio__label">Gold</span>
    </label>
    </div>

I’d like to have something like this:

<div class="mdl-cell mdl-cell--9-col">
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored radio-selected" style="background: red;">Red</button>
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored radio-unselected" style="background: #FFC200;">Amber</button>
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored radio-unselected" style="background: green;">Green</button>
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored radio-unselected" style="background: #FFD700;">Gold</button>
</div>

My question is, what’s the best way to define the behaviour of the above in Meteor? (i.e. ensure that only one button is “selected” and automatically apply a CSS class on select/unselect)

I’m also using the autoforms package as well, not sure if that makes it easier/harder.

I’m trying to think if there’s another way to do this - maybe manipulating the DOM to swap out radio elements for buttons? Or is that a bit hacky? I think it might be nicer if we could wrap this in a component in Meteor somehow.

2

My question is, what’s the best way to define the behaviour of the above in Meteor? (i.e. ensure that only one button is “selected” and automatically apply a CSS class on select/unselect)

write code to do what you want to do on the onclick event

I’m also using the autoforms package as well, not sure if that makes it easier/harder.

harder

I’m trying to think if there’s another way to do this - maybe manipulating the DOM to swap out radio elements for buttons? Or is that a bit hacky? I think it might be nicer if we could wrap this in a component in Meteor somehow.

yes, that’s hacky

3

A common technique (used by many css frameworks) is to keep input radio but to wrap them in labels. Style your label as you wish, and when the label is clicked the hidden input radio button will be selected. You can then add some “active” class to the label when the radio input is selected

Example :
Text of the label, or whatever content


Text of the label, or whatever content

input must be visibly hidden, don’t use display:none; but rather something like (taken from Material Design lite):

position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
-ms-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none;