React-redux and custom checkboxes/radioboxes

I have a react-form project coming along - and I've started to try and style the radio/checkbox options - but I've hit a bit of a wall.

http://ift.tt/2f05HfK

..custom1 http://ift.tt/2gJnU4Y

..custom2 http://ift.tt/2f0mfEl

---

When I try and apply the styles -- the elements become styled - but they also become non-functional. I wasn't sure if its just the markup from a regularField is the culprit - or if I need to wrap the radio+label in a wrapper.

If I knock out the position:absolute and use the real input - it affects the styled variant. Why is clicking on the item NOT invoking a change?

//current code

<h2>my component 1</h2>

<div>
  <label>
    <Field name="sex" component="input" type="radio" value="male" />
    {' '}
    Male
  </label>
  <label>
    <Field name="sex" component="input" type="radio" value="female" />
    {' '}
    Female
  </label>
  <Field name="sex" component={renderError} />
</div>



<h2>my component 4</h2>

  <div>

    <div className="group-wrapper">
      <input type="radio" id="test1" name="radio-group" checked />
      <label className="group-label" for="test1">Apple</label>
    </div>
    <div className="group-wrapper">
      <input type="radio" id="test2" name="radio-group" />
      <label className="group-label" for="test2">Peach</label>
    </div>
    <div className="group-wrapper">
      <input type="radio" id="test3" name="radio-group" />
      <label className="group-label" for="test3">Orange</label>
    </div>

    <div className="group-wrapper">
      <Field id="gender1" name="gender" component="input" type="radio" value="male" />
      <label className="group-label" for="gender1"><span></span>male</label>
    </div>

    <div className="group-wrapper">
    <Field id="gender2" name="gender" component="input" type="radio" value="female" checked="checked" />
      <label className="group-label" for="gender2"><span></span>female</label>
    </div>

    <div className="group-wrapper">
      <input type="checkbox" id="c1" name="cc" checked="checked"/>
      <label className="group-label" for="c1"><span></span>Check Box 1</label>
    </div>

    <div className="group-wrapper">
      <input type="checkbox" id="c2" name="cc" />
      <label className="group-label" for="c2"><span></span>Check Box 2</label>
    </div>

  </div>

<h2>my component 3</h2>

<div>
  <label>
    <Field name="howLong" component="input" type="radio" value="Less than a month" />
    {' '}
    Less than a month
  </label>
  <label>
    <Field name="howLong" component="input" type="radio" value="1-5 months" />
    {' '}
    1-5 months
  </label>
  <label>
    <Field name="howLong" component="input" type="radio" value="6-12 months" />
    {' '}
    6-12 months
  </label>
  <label>
    <Field name="howLong" component="input" type="radio" value="Over a year" />
    {' '}
    Over a year
  </label>
  <Field name="howLong" component={renderError} />
</div>