Checkbox Groups

Efficient multi-checkbox management.

Checkbox group attribute simplifies managing multiple checkboxes by grouping them together and applying validation and navigation controls seamlessly.

Setup

Attribute: sf-checkbox-group

Value: myGroupName (e.g., "someOptions")

Where: Applied to the container element of a group of checkboxes.

Keyboard Navigation

By default, keyboard navigation number (0-9) is enabled for a checkbox group.

→ Check more in Checkbox & Radio Bindings.

---

Defining a Checkbox Group

In this example we are creating a checkbox group and apply a validation of minimum 2 and maximum of 4 options that are allowed.

HTML Example

index.html

<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

Dos and Dont's

---

Do ✅:

• Ensure all checkboxes within the group have the same name.

• Use sf-checkbox-group to manage validation collectively.

• Target the group with sf-error for error handling. Use the name of the group as the value for the sf-error attribute (see Setup - Error Binding).

Don't ❌:

• Use different names for checkboxes within the same group.