Semantic UI Radio Buttons do not check when clicking the label

Question

As the title says, the radio buttons do not check when the label (tex) is clicked. However this seems to work fine on Semantic's site.

Semantic UI Documentation with working radio buttons: http://semantic-ui.com/modules/checkbox.html

The following example code is straight from the Semantic UI Documentation above:

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="ui form">
  <div class="grouped fields">
    <label>How often do you use checkboxes?</label>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" checked="checked">
        <label>Once a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2">
        <label>2-3 times a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2">
        <label>Once a day</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2">
        <label>Twice a day</label>
      </div>
    </div>
  </div>
</div>

How can I fix this?

Edit: Apparently I need some javascript for the radio buttons as is mentioned here: http://semantic-ui.com/modules/checkbox.html#/usage. I'm having trouble finding the minimum required code for a working radio button/checkbox though.

Furlong

Answer 1

I needed $('.ui.checkbox').checkbox(); in my Javascript.

Furlong

I was going nuts about this. It seems like many things in Semantic UI need explicit JavaScript calls. – Boeke

This worked for me as well, which is frustrating because the documentation explicitly states, "A checkbox does not require Javascript to function." semantic-ui.com/modules/checkbox.html#/usage – Rattat

Note that you cannot put <input> inside <label>. It must be <input/><label/> and not <label><input/></label> in order for the checkbox/radio inputs to work at all (even with the JS call). (I know this is not the problem in the original question, but it was my problem that led me to this answer) – Unbending

See also the answer below for a no-JS solution – Calamanco

Answer 2

If you want to check radio buttons clicking to label, you have to use id for input field and for for label:

<div class="ui form">
  <div class="grouped fields">
    <label>How often do you use checkboxes?</label>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" checked="checked" id="100">
        <label for="100">Once a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" id="101">
        <label for="101">2-3 times a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" id="102">
        <label for="102">Once a day</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" name="example2" id="103">
        <label for="103">Twice a day</label>
      </div>
    </div>
  </div>
</div>

jsfiddle-link

of course, you can use your own id and for names, but all values must be unique!

Prudery

Answer 3

Seems the style applied for 'label' tags causing the problem. You can remove the class 'ui radio checkbox' and move the input tag inside the label tag and try , it works as desired. if you want this functionality try overriding this class with your custom class.

Wildfowl

Answer 4

There's no need in JS if labels are correctly "linked" to the elements they should toggle/check:

  <div class="ui radio checkbox">
    <input type="radio" name="example2" checked="checked" id="radio1">
    <label for="radio1">Once a week</label>
  </div>

Here's how this can be done:

1. Assign "id" properties
2. Use the "for" property in label definition, pointing to the id from the step 1

Calamanco

Answer 5

It's a little late for this answer but I fixed it in the most easiest way.

Add value="true" to your input checkbox like so:

The value will only be submitted to server if it's checked.

Kandrakandy

This doesn't answer the question. Douglas Gaskell already provided a good answer. – Braeunig