Checkbox & Radio Fields

Checkboxes and radio fields need to be written in a specific way when used with KwesForms in order to benefit from our validation rules. Read below to find out how to correctly use them.

Checkbox Groups

When using our script

• Wrap your group of checkboxes inside a <fieldset data-kw-group>. All inputs inside the group must have the same name.
• Add any validation rules inside a rules attribute in the <fieldset data-kw-group>.
• You don't have to add validation rules if you don't need it.

<fieldset data-kw-group rules="required">
    <input type="checkbox" name="fruits" value="Apple"> Apple
    <input type="checkbox" name="fruits" value="Orange"> Orange
    <input type="checkbox" name="fruits" value="Kiwi"> Kiwi
</fieldset>

<fieldset data-kw-group data-kw-rules="required">
    <input type="checkbox" name="fruits" value="Apple"> Apple
    <input type="checkbox" name="fruits" value="Orange"> Orange
    <input type="checkbox" name="fruits" value="Kiwi"> Kiwi
</fieldset>

When not using our script

When you're not using our script, you just need to append a [] to the field name as you would normally do.

<fieldset>
    <input type="checkbox" name="fruits[]" value="Apple"> Apple
    <input type="checkbox" name="fruits[]" value="Orange"> Orange
    <input type="checkbox" name="fruits[]" value="Kiwi"> Kiwi
</fieldset>

Single Checkbox

Single checkboxes are normally used as booleans. If you don't add any value attribute to single checkboxes it will be treated as a boolean checkbox automatically.

• Add rules inside a rules attribute inside the single checkbox input.
• You don't have to add validation rules if you don't need it.

<input type="checkbox" name="terms" rules="required">
I agree to the terms and conditions.

<input type="checkbox" name="terms" data-kw-rules="required">
I agree to the terms and conditions.

Radio Group

• Wrap your group of radio fields inside a <fieldset data-kw-group>. All inputs inside the group must have the same name.
• Add any validation rules inside a rules attribute in the <fieldset data-kw-group>.
• You don't have to add validation rules if you don't need it.

<fieldset data-kw-group rules="required">
    <input type="radio" name="colors" value="Red"> Red
    <input type="radio" name="colors" value="Green"> Green
    <input type="radio" name="colors" value="Blue"> Blue
</fieldset>

<fieldset data-kw-group data-kw-rules="required">
    <input type="radio" name="colors" value="Red"> Red
    <input type="radio" name="colors" value="Green"> Green
    <input type="radio" name="colors" value="Blue"> Blue
</fieldset>

Notice anything wrong in our docs? Let us know.