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.

score 23 · Accepted Answer · answered Jan 10 '16 at 04:59

23

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

answered Jan 10 '16 at 04:59

Douglas Gaskell

9,017
9
71
128

I was going nuts about this. It seems like many things in Semantic UI need explicit JavaScript calls. – nbkhope Feb 04 '17 at 01:12
This worked for me as well, which is frustrating because the documentation explicitly states, "A checkbox does not require Javascript to function." https://semantic-ui.com/modules/checkbox.html#/usage – Sheldon Scott Jul 08 '17 at 13:06
Note that you cannot put `` inside ``. It must be `` and not `` 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) – Coder Jun 07 '18 at 10:55
See also the answer below for a no-JS solution – Igor Jan 08 '22 at 18:24

score 6 · Answer 2 · answered Jan 10 '16 at 04:59

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!

score 0 · Answer 3 · answered Jan 10 '16 at 05:02

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.

score 0 · Answer 4 · answered Jan 08 '22 at 18:23

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:

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

score -2 · Answer 5 · answered May 25 '17 at 17:00

-2

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.

answered May 25 '17 at 17:00

Mathieu DSTP

117
3
4

This doesn't answer the question. Douglas Gaskell already provided a good answer. – Hallgeir Engen Nov 13 '17 at 12:26

Semantic UI Radio Buttons do not check when clicking the label

5 Answers5