Checkbox & Radio Fields

Checkboxes

Wrap your group of checkboxes inside a <div class="kw-checkbox-group">. This is necessary even if you only have one checkbox input.
Add any validation rules inside a rules attribute in the <div class="kw-checkbox-group">.
Add the checkbox label inside a label attribute in your checkbox input.
Add an id attribute to the input to allow for clicking on the label therefore improving UX.

                    <div class="kw-checkbox-group" rules="required">

                        <input type="checkbox" name="fruits" value="Apple" id="Apple" label="Apple">

                        <input type="checkbox" name="fruits" value="Orange" id="Orange" label="Orange">

                        <input type="checkbox" name="fruits" value="Kiwi" id="Kiwi" label="Kiwi">

                    </div>

Radio Buttons

Wrap your group of radio inputs inside a <div class="kw-radio-group">. This is necessary even if you only have one radio input.
Add any validation rules inside a rules attribute in the <div class="kw-radio-group">.
Add the radio label inside a label attribute in your radio input.
Add an id attribute to the input to allow for clicking on the label therefore improving UX.

                    <div class="kw-radio-group" rules="required">

                        <input type="radio" name="color" value="Red" id="Red" label="Red">

                        <input type="radio" name="color" value="Green" id="Green" label="Green">

                        <input type="radio" name="color" value="Blue" id="Blue" label="Blue">

                    </div>