Checkbox group

Examples

Usage

Use checkbox groups for a list of options where the user can select zero, one, or more choices that are independent of each other.

Do:

layout the list of checkboxes vertically
align the checkbox to the left of the checkbox label
use subheadings to break down a long list of checkboxes into logical groups
use the label tag in HTML, so the user can select the option using both the checkbox and label
provide a clear hint such as “Select all that apply” to help users understand they can choose multiple options from a list of checkboxes, as this may not be obvious
keep hint text to a single sentence without full stop
if ‘none’ is a valid response to a question, include it as an option, selecting this should unselect the other checkboxes in the group
make sure the checkbox group is keyboard accessible and screen reader compatible

Avoid:

using the checkbox group component if you want a user to select one option out of a list, instead use radio buttons
using negations in labels such as 'Don’t send me newsletters'
using a checkbox group to toggle a single option on and off, instead use a checkbox

References

NN/g Nielsen Norman Group
Checkboxes vs. Radio Buttons

UX Planet
Checkbox vs Toggle Switch

Please correct the errors and try again.

Copy


                <turas-checkbox-group asp-for="CheckBoxGroup" asp-items="CheckBoxGroups" />

Copy


                <div class="form-group"><label class="control-label  ">Checkbox group</label>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroup" value="1" id="CheckBoxGroup_1"   class="form-check-input"  />
<label for="CheckBoxGroup_1" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroup" value="2" id="CheckBoxGroup_2"   class="form-check-input"  />
<label for="CheckBoxGroup_2" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroup" value="3" id="CheckBoxGroup_3"   class="form-check-input"  />
<label for="CheckBoxGroup_3" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroup" value="4" id="CheckBoxGroup_4"   class="form-check-input"  />
<label for="CheckBoxGroup_4" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroup" value="5" id="CheckBoxGroup_5"   class="form-check-input"  />
<label for="CheckBoxGroup_5" class="form-check-label">Checkbox label</label>
</div>

<span class="field-validation-valid" data-valmsg-for="CheckBoxGroup" data-valmsg-replace="true"></span>
</div>

Copy


                <turas-checkbox-group asp-for="CheckBoxGroupRequired" asp-items="CheckBoxGroupRequireds" />

Copy


                <div class="form-group"><label class="control-label requiredFieldMarker ">Checkbox group required</label>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupRequired" value="1" id="CheckBoxGroupRequired_1"   class="form-check-input" data-val="true" data-val-required="Must select at least one checkbox" />
<label for="CheckBoxGroupRequired_1" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupRequired" value="2" id="CheckBoxGroupRequired_2"   class="form-check-input"  />
<label for="CheckBoxGroupRequired_2" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupRequired" value="3" id="CheckBoxGroupRequired_3"   class="form-check-input"  />
<label for="CheckBoxGroupRequired_3" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupRequired" value="4" id="CheckBoxGroupRequired_4"   class="form-check-input"  />
<label for="CheckBoxGroupRequired_4" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupRequired" value="5" id="CheckBoxGroupRequired_5"   class="form-check-input"  />
<label for="CheckBoxGroupRequired_5" class="form-check-label">Checkbox label</label>
</div>

<span class="field-validation-valid" data-valmsg-for="CheckBoxGroupRequired" data-valmsg-replace="true"></span>
</div>

Copy


                <turas-checkbox-group asp-for="CheckBoxGroupGuidanceText" asp-items="CheckBoxGroupGuidanceTexts" guidance-text="I am some guidance text" />

Copy


                <div class="form-group"><label class="control-label  ">Checkbox group guidance text</label>
<div class="form-field-guidance-text">I am some guidance text</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupGuidanceText" value="1" id="CheckBoxGroupGuidanceText_1"   class="form-check-input"  />
<label for="CheckBoxGroupGuidanceText_1" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupGuidanceText" value="2" id="CheckBoxGroupGuidanceText_2"   class="form-check-input"  />
<label for="CheckBoxGroupGuidanceText_2" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupGuidanceText" value="3" id="CheckBoxGroupGuidanceText_3"   class="form-check-input"  />
<label for="CheckBoxGroupGuidanceText_3" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupGuidanceText" value="4" id="CheckBoxGroupGuidanceText_4"   class="form-check-input"  />
<label for="CheckBoxGroupGuidanceText_4" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupGuidanceText" value="5" id="CheckBoxGroupGuidanceText_5"   class="form-check-input"  />
<label for="CheckBoxGroupGuidanceText_5" class="form-check-label">Checkbox label</label>
</div>

<span class="field-validation-valid" data-valmsg-for="CheckBoxGroupGuidanceText" data-valmsg-replace="true"></span>
</div>

Checkbox group guidance text

A paragraph.

List item
List item
List item

Checkbox label

Copy


                <turas-checkbox-group asp-for="CheckBoxGroupGuidanceTextAccordion" asp-items="CheckBoxGroupGuidanceTextAccordions">
                    <turas-form-guidance collapses>
                        <p>A paragraph.</p>
                        <ul>
                            <li>List item</li>
                            <li>List item</li>
                            <li>List item</li>
                        </ul>
                    </turas-form-guidance>
                </turas-checkbox-group>

Copy


                <div class="form-group"><label class="control-label  ">Checkbox group guidance text</label>
<div class="turas-form-guidance-collapse">
            <button class="turas-form-guidance-collapse-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-917cd041-60b4-4d3c-97bd-03c247091d6d" aria-expanded="false" aria-controls="collapse-917cd041-60b4-4d3c-97bd-03c247091d6d"><span class="visually-hidden">Guidance</span></button>              
            <div class="turas-form-guidance-collapse-content collapse" id="collapse-917cd041-60b4-4d3c-97bd-03c247091d6d">   
                <div class="form-field-guidance-text"><span class=""></span>
                    
                        <p>A paragraph.</p>
                        <ul>
                            <li>List item</li>
                            <li>List item</li>
                            <li>List item</li>
                        </ul>
                       
                </div>
            </div></div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupGuidanceTextAccordion" value="1" id="CheckBoxGroupGuidanceTextAccordion_1"   class="form-check-input"  />
<label for="CheckBoxGroupGuidanceTextAccordion_1" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupGuidanceTextAccordion" value="2" id="CheckBoxGroupGuidanceTextAccordion_2"   class="form-check-input"  />
<label for="CheckBoxGroupGuidanceTextAccordion_2" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupGuidanceTextAccordion" value="3" id="CheckBoxGroupGuidanceTextAccordion_3"   class="form-check-input"  />
<label for="CheckBoxGroupGuidanceTextAccordion_3" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupGuidanceTextAccordion" value="4" id="CheckBoxGroupGuidanceTextAccordion_4"   class="form-check-input"  />
<label for="CheckBoxGroupGuidanceTextAccordion_4" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupGuidanceTextAccordion" value="5" id="CheckBoxGroupGuidanceTextAccordion_5"   class="form-check-input"  />
<label for="CheckBoxGroupGuidanceTextAccordion_5" class="form-check-label">Checkbox label</label>
</div>

                    
                
<span class="field-validation-valid" data-valmsg-for="CheckBoxGroupGuidanceTextAccordion" data-valmsg-replace="true"></span>
</div>

Copy


                <turas-checkbox-group asp-for="CheckBoxGroupAdditionalClasses" asp-items="CheckBoxGroupAdditionalClassess" additional-classes="remove-max-width mt-5" />

Copy


                <div class="form-group"><label class="control-label  ">Checkbox group additional classes</label>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupAdditionalClasses" value="1" id="CheckBoxGroupAdditionalClasses_1"   class="form-check-input"  />
<label for="CheckBoxGroupAdditionalClasses_1" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupAdditionalClasses" value="2" id="CheckBoxGroupAdditionalClasses_2"   class="form-check-input"  />
<label for="CheckBoxGroupAdditionalClasses_2" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupAdditionalClasses" value="3" id="CheckBoxGroupAdditionalClasses_3"   class="form-check-input"  />
<label for="CheckBoxGroupAdditionalClasses_3" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupAdditionalClasses" value="4" id="CheckBoxGroupAdditionalClasses_4"   class="form-check-input"  />
<label for="CheckBoxGroupAdditionalClasses_4" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupAdditionalClasses" value="5" id="CheckBoxGroupAdditionalClasses_5"   class="form-check-input"  />
<label for="CheckBoxGroupAdditionalClasses_5" class="form-check-label">Checkbox label</label>
</div>

<span class="field-validation-valid" data-valmsg-for="CheckBoxGroupAdditionalClasses" data-valmsg-replace="true"></span>
</div>

Copy


                <div class="row">
                    <div class="col-md-6">
                        <turas-checkbox-group asp-for="CheckBoxGroupInARowOne" asp-items="CheckBoxGroupInARowOnes" />
                    </div>
                    <div class="col-md-6">
                        <turas-checkbox-group asp-for="CheckBoxGroupInARowTwo" asp-items="CheckBoxGroupInARowTwos" />
                    </div>
                </div>

Copy


                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group"><label class="control-label  ">Checkbox group in a row</label>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowOne" value="1" id="CheckBoxGroupInARowOne_1"   class="form-check-input"  />
<label for="CheckBoxGroupInARowOne_1" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowOne" value="2" id="CheckBoxGroupInARowOne_2"   class="form-check-input"  />
<label for="CheckBoxGroupInARowOne_2" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowOne" value="3" id="CheckBoxGroupInARowOne_3"   class="form-check-input"  />
<label for="CheckBoxGroupInARowOne_3" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowOne" value="4" id="CheckBoxGroupInARowOne_4"   class="form-check-input"  />
<label for="CheckBoxGroupInARowOne_4" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowOne" value="5" id="CheckBoxGroupInARowOne_5"   class="form-check-input"  />
<label for="CheckBoxGroupInARowOne_5" class="form-check-label">Checkbox label</label>
</div>

<span class="field-validation-valid" data-valmsg-for="CheckBoxGroupInARowOne" data-valmsg-replace="true"></span>
</div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group"><label class="control-label  ">Checkbox group in a row</label>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowTwo" value="1" id="CheckBoxGroupInARowTwo_1"   class="form-check-input"  />
<label for="CheckBoxGroupInARowTwo_1" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowTwo" value="2" id="CheckBoxGroupInARowTwo_2"   class="form-check-input"  />
<label for="CheckBoxGroupInARowTwo_2" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowTwo" value="3" id="CheckBoxGroupInARowTwo_3"   class="form-check-input"  />
<label for="CheckBoxGroupInARowTwo_3" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowTwo" value="4" id="CheckBoxGroupInARowTwo_4"   class="form-check-input"  />
<label for="CheckBoxGroupInARowTwo_4" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowTwo" value="5" id="CheckBoxGroupInARowTwo_5"   class="form-check-input"  />
<label for="CheckBoxGroupInARowTwo_5" class="form-check-label">Checkbox label</label>
</div>

<span class="field-validation-valid" data-valmsg-for="CheckBoxGroupInARowTwo" data-valmsg-replace="true"></span>
</div>
                    </div>
                </div>

Copy


                <div class="row">
                    <div class="col-md-6">
                        <turas-checkbox-group asp-for="CheckBoxGroupInARowRequiredOne" asp-items="CheckBoxGroupInARowRequiredOnes" />
                    </div>
                    <div class="col-md-6">
                        <turas-checkbox-group asp-for="CheckBoxGroupInARowRequiredTwo" asp-items="CheckBoxGroupInARowRequiredTwos" />
                    </div>
                </div>

Copy


                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group"><label class="control-label requiredFieldMarker ">Checkbox group in a row required</label>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowRequiredOne" value="1" id="CheckBoxGroupInARowRequiredOne_1"   class="form-check-input" data-val="true" data-val-required="Must select at least one checkbox" />
<label for="CheckBoxGroupInARowRequiredOne_1" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowRequiredOne" value="2" id="CheckBoxGroupInARowRequiredOne_2"   class="form-check-input"  />
<label for="CheckBoxGroupInARowRequiredOne_2" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowRequiredOne" value="3" id="CheckBoxGroupInARowRequiredOne_3"   class="form-check-input"  />
<label for="CheckBoxGroupInARowRequiredOne_3" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowRequiredOne" value="4" id="CheckBoxGroupInARowRequiredOne_4"   class="form-check-input"  />
<label for="CheckBoxGroupInARowRequiredOne_4" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowRequiredOne" value="5" id="CheckBoxGroupInARowRequiredOne_5"   class="form-check-input"  />
<label for="CheckBoxGroupInARowRequiredOne_5" class="form-check-label">Checkbox label</label>
</div>

<span class="field-validation-valid" data-valmsg-for="CheckBoxGroupInARowRequiredOne" data-valmsg-replace="true"></span>
</div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group"><label class="control-label requiredFieldMarker ">Checkbox group in a row required</label>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowRequiredTwo" value="1" id="CheckBoxGroupInARowRequiredTwo_1"   class="form-check-input" data-val="true" data-val-required="Must select at least one checkbox" />
<label for="CheckBoxGroupInARowRequiredTwo_1" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowRequiredTwo" value="2" id="CheckBoxGroupInARowRequiredTwo_2"   class="form-check-input"  />
<label for="CheckBoxGroupInARowRequiredTwo_2" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowRequiredTwo" value="3" id="CheckBoxGroupInARowRequiredTwo_3"   class="form-check-input"  />
<label for="CheckBoxGroupInARowRequiredTwo_3" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowRequiredTwo" value="4" id="CheckBoxGroupInARowRequiredTwo_4"   class="form-check-input"  />
<label for="CheckBoxGroupInARowRequiredTwo_4" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupInARowRequiredTwo" value="5" id="CheckBoxGroupInARowRequiredTwo_5"   class="form-check-input"  />
<label for="CheckBoxGroupInARowRequiredTwo_5" class="form-check-label">Checkbox label</label>
</div>

<span class="field-validation-valid" data-valmsg-for="CheckBoxGroupInARowRequiredTwo" data-valmsg-replace="true"></span>
</div>
                    </div>
                </div>

Copy


            <turas-checkbox-group asp-for="CheckBoxGroupDisabled" asp-items="CheckBoxGroupDisableds" />

Copy


            <div class="form-group"><label class="control-label  ">Checkbox group disabled</label>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupDisabled" value="1" id="CheckBoxGroupDisabled_1" checked disabled class="form-check-input"  />
<label for="CheckBoxGroupDisabled_1" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupDisabled" value="2" id="CheckBoxGroupDisabled_2"  disabled class="form-check-input"  />
<label for="CheckBoxGroupDisabled_2" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupDisabled" value="3" id="CheckBoxGroupDisabled_3"  disabled class="form-check-input"  />
<label for="CheckBoxGroupDisabled_3" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupDisabled" value="4" id="CheckBoxGroupDisabled_4"  disabled class="form-check-input"  />
<label for="CheckBoxGroupDisabled_4" class="form-check-label">Checkbox label</label>
</div>
<div class="form-check custom-checkbox">
<input type="checkbox" name="CheckBoxGroupDisabled" value="5" id="CheckBoxGroupDisabled_5"  disabled class="form-check-input"  />
<label for="CheckBoxGroupDisabled_5" class="form-check-label">Checkbox label</label>
</div>

<span class="field-validation-valid" data-valmsg-for="CheckBoxGroupDisabled" data-valmsg-replace="true"></span>
</div>

Parameters for turas-checkbox-group

asp-for - Binds the checkbox group to a model property
asp-items - Specifies the list of items to be displayed in the checkbox group
guidance-text - Provides additional guidance text for the checkbox group
additional-classes - Allows for custom CSS classes to be added to the checkbox group
collapses - Indicates that the guidance text can be collapsed

Checkbox

Date picker

Examples

Usage

References

Parameters for turas-checkbox-group

Was this page helpful?