Yoothemes UIKit () provides a way of making a button group appear to function like radio buttons. See about half way down on this page: .html

But the documentation is entirely missing on how to make the button group actually function like radio buttons in a form. Grateful for advice on this.

Currently if I use them in a form any button clicked submits the form. example form for iphone ordering options:

   <form>
      <div class="uk-button-group uk-margin-bottom" data-uk-button-radio>
        <button class="uk-button uk-button-large">16gb</button>
        <button class="uk-button uk-button-large">32gb</button>
        <button class="uk-button uk-button-large">64gb</button>
      </div>
      <div class="uk-button-group uk-margin-bottom" data-uk-button-radio>
        <button class="uk-button uk-button-large">Space Gray</button>
        <button class="uk-button uk-button-large">Gold</button>
        <button class="uk-button uk-button-large">Silver</button>
      </div>
      <button type="submit" class="uk-button uk-button-large uk-button-primary"><i class="uk-icon-magnifier"></i> Review and Order</button>
    </form>

Yoothemes UIKit (http://getuikit.) provides a way of making a button group appear to function like radio buttons. See about half way down on this page: http://getuikit./docs/button.html

But the documentation is entirely missing on how to make the button group actually function like radio buttons in a form. Grateful for advice on this.

Currently if I use them in a form any button clicked submits the form. example form for iphone ordering options:

   <form>
      <div class="uk-button-group uk-margin-bottom" data-uk-button-radio>
        <button class="uk-button uk-button-large">16gb</button>
        <button class="uk-button uk-button-large">32gb</button>
        <button class="uk-button uk-button-large">64gb</button>
      </div>
      <div class="uk-button-group uk-margin-bottom" data-uk-button-radio>
        <button class="uk-button uk-button-large">Space Gray</button>
        <button class="uk-button uk-button-large">Gold</button>
        <button class="uk-button uk-button-large">Silver</button>
      </div>
      <button type="submit" class="uk-button uk-button-large uk-button-primary"><i class="uk-icon-magnifier"></i> Review and Order</button>
    </form>

• javascript
• jquery
• html
• forms
• yoothemes

1 Answer 1

This worked for me:

<div class="uk-button-group" data-uk-button-radio>
    <label class="uk-button">
        <input type="radio" name="gender" value="0" style="display:none;"/>
        Male
    </label>
    <label class="uk-button">
        <input type="radio" name="gender" value="1" style="display:none;"/>
        Female
    </label>
</div>

Alternatively you could do something like this too:

<div class="uk-button-group" data-uk-button-radio>
    <label class="uk-button" for="male">Male</label>
    <label class="uk-button" for="female">Female</label>
    <input type="radio" id="male" name="gender" value="0" style="display:none;"/>
    <input type="radio" id="female" name="gender" value="1" style="display:none;"/>
</div>

Hope it helps.