Radio buttons do not check when clicking the label

Question

I have a group of 3 radio buttons in react semantic ui.

This works correctly. Problem is in UI bug, when I click on one of this radio buttons, buttons are not checked.

Screenshot of ui bug:

Is someone know why buttons are not checked?

Code of radio buttons:

  <Form>
    <Form.Field>
      <Radio
        label="New Claims"
        name="isTransferred"
        value={false}
        checked={isTransferred === false}
        onChange={this.handleFilterChanged}
      />
    </Form.Field>
    <Form.Field>
      <Radio
        label="Transferred Claims"
        name="isTransferred"
        value={false}
        checked={isTransferred === true}
        onChange={this.handleFilterChanged}
      />
    </Form.Field>
    <Form.Field>
      <Radio
        label="New Claims and Trasferred Claims"
        name="isTransferred"
        value={'all'}
        checked={isTransferred === 'all'}
        onChange={this.handleFilterChanged}
      />
    </Form.Field>
  </Form>

UPDATED:

Generated HTML taken from browser:

<div class="row">
<form class="ui form" style="padding-left: 3.3em;">
    <div class="field">
        <label>Assignments:</label>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" class="hidden" name="isTransferred" readonly="" tabindex="0" value="false">
            <label>New Claims</label>
        </div>
    </div>
    <div class="field">
        <div class="ui checked radio checkbox">
            <input type="radio" class="hidden" name="isTransferred" readonly="" tabindex="0" value="true">
            <label>Transferred Claims</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" class="hidden" name="isTransferred" readonly="" tabindex="0" value="all">
            <label>New Claims and Trasferred Claims</label>
        </div>
    </div>
</form>

Answer 1

The label must have the "for" attribute for an input element to react to a click on its label.

The value of the "for" attribute must be an "id" of an input element.

I believe it should work if you add "id" property to the Radio element.

More information can be found here: HTML element