# Checkbox Groups

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.

{% hint style="info" %}
**Keyboard Navigation**

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

→ Check more in [checkbox-and-radio-bindings](https://deltaclan.gitbook.io/superform/accessibility/checkbox-and-radio-bindings "mention"). 

{% endhint %}

***

## 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**

<pre class="language-html" data-title="index.html"><code class="lang-html"><strong>&#x3C;div sf-checkbox-group="someOptions" sf-validation="checkbox(2, 4)">
</strong>  &#x3C;input type="checkbox" name="option1"> Option 1&#x3C;br>
  &#x3C;input type="checkbox" name="option2"> Option 2&#x3C;br>
  &#x3C;input type="checkbox" name="option3"> Option 3&#x3C;br>
  &#x3C;input type="checkbox" name="option4"> Option 4&#x3C;br>
  &#x3C;input type="checkbox" name="option5"> Option 5&#x3C;br>
  &#x3C;input type="checkbox" name="option6"> Option 6&#x3C;br>
&#x3C;/div>
</code></pre>

**Webflow Example**

<figure><img src="https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F450000313-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FDGLtnaQr6bP3qHCWvX0r%252Fuploads%252FY5N4oY1iqr1Y4LnobyVa%252FCleanShot%25202024-07-07%2520at%252023.02.36%25402x.png%3Falt%3Dmedia%26token%3D1ddf74cd-feb3-49f6-830a-3f4dcca941f1&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=82eaf8af&#x26;sv=1" alt=""><figcaption></figcaption></figure>

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FN65SUydARA9YZENcjy6H%2FCheckbox_Validation_Good!!.mp4?alt=media&token=f82c6108-8bb6-4a3e-87f7-9c9f3091ce4c>" %}

{% hint style="info" %}
**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](https://deltaclan.gitbook.io/superform/input-validation-and-errors/error-management/manual-error-setup#setup-error-binding "mention")).

**Don't** ❌**:**

* Use different names for checkboxes within the same group.

{% endhint %}