Checkbox group

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>

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-767d4bef-55f4-4e33-bf76-7dc847f8b1ea" aria-expanded="false" aria-controls="collapse-767d4bef-55f4-4e33-bf76-7dc847f8b1ea"><span class="visually-hidden">Guidance</span></button>              
            <div class="turas-form-guidance-collapse-content collapse" id="collapse-767d4bef-55f4-4e33-bf76-7dc847f8b1ea">   
                <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>

Examples

Parameters for turas-checkbox-group

Was this page helpful?