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
- 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
rulesattribute 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>
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
rulesattribute 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
rulesattribute 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.