checkbox()

Ensure proper number of checkboxes selected.

Setup

Attribute: sf-validation="checkbox(MIN_NUM, MAX_NUM)"

Where: Checkbox Group

Ensures that a specific range of checkboxes are selected within a group. This is useful for forms where users must make a certain number of selections, such as surveys or multi-select options.

Please note: checkbox() validation should be applied to checkbox groups with attribute sf-checkbox-group.

Read more about Checkbox Groups here.

HTML Example

index.html

<!-- Example with at least 2 checkboxes and a maximum of 4 checkboxes -->
<div sf-checkbox-group="someOptions" sf-validation="checkbox(2, 4)">
  <input type="checkbox" name="option1"> Option 1<br>
  <input type="checkbox" name="option2"> Option 2<br>
  <input type="checkbox" name="option3"> Option 3<br>
  <input type="checkbox" name="option4"> Option 4<br>
  <input type="checkbox" name="option5"> Option 5<br>
  <input type="checkbox" name="option6"> Option 6<br>
</div>

Webflow Example

Setting the checkbox() validation attribute to the checkbox group.

Video example how to setup checkbox() validation.

→ You can also see it live here.

---

Usage Examples

• checkbox(0,10): Requires at least 0 checkboxes to be selected, and allows up to 10 checkboxes to be selected.

• checkbox(2): Requires at least 2 checkboxes to be selected, with no restriction on the maximum number of selections.

• checkbox(3,3): Requires exactly 3 checkboxes to be selected.

---

Attribute Configuration

Make sure to add the sf-validation="checkbox(MIN_NUM,MAX_NUM)" attribute to valid checkbox groups as mentioned above. Here are some instructions to keep in mind:

• The attribute value should follow the format checkbox(MIN_NUM,MAX_NUM) or checkbox(MIN_NUM).

Dos and Don'ts

---

Do ✅

• checkbox(2, 10)

• checkbox(2)

Don't ❌

• checkbox(any, 10): Don't use alphabetic characters as arguments; only numbers are allowed.

• checkbox(2 , 5): Don't use spaces.

• checkbox(1, 2, 3): Don't use more than 2 arguments.