Checkbox

Examples

Usage

Use the checkbox component when you need to help users toggle a single option on or off.

Do:

place the checkbox to the left of its label for accessibility
provide a clear, concise label that describes the action or agreement
if needed, provide a short hint below the label to clarify what the checkbox does
keep hint text to a single sentence without full stop
use it to check if the user agrees to something specific, like accepting the terms and conditions or choosing to join a service
position any links to terms and conditions or related content before the checkbox, rather than placing them inside the label

Avoid:

using a single checkbox when the user must choose one option from a list, use radio buttons instead
triggering immediate actions with a checkbox, use a button for that
pre-selecting the checkbox unless there is a strong, user-centred reason
placing links inside checkbox labels, as this can cause usability and accessibility issues, particularly for touchscreen users
placing links in hint text, as screen readers may not announce them properly

Please correct the errors and try again.

Checkbox

Checkbox label

Copy


                <turas-checkbox asp-for="Checkbox" checkbox-label="Checkbox label" hide-required-marker heading-label="Checkbox" />

Copy


                <fieldset class="form-group form-single-checkbox "><legend class="control-label requiredFieldMarker suppressRequiredFieldMarker">Checkbox</legend>
<div class="form-check custom-checkbox">
<input class="form-check-input" type="checkbox" data-val="true" data-val-required="The Checkbox field is required." id="Checkbox" name="Checkbox" value="true" /><input name="Checkbox" type="hidden" value="false" />
<label class="control-label" for="Checkbox">Checkbox label</label>
</div><!-- end form-check custom-checkbox -->
<span class="field-validation-valid" data-valmsg-for="Checkbox" data-valmsg-replace="true"></span>
</fieldset>

Checkbox required

Checkbox label

Copy


                <turas-checkbox asp-for="CheckboxRequired" checkbox-label="Checkbox label" />

Copy


                <fieldset class="form-group form-single-checkbox "><legend class="control-label requiredFieldMarker  ">Checkbox required</legend>
<div class="form-check custom-checkbox">
<input class="form-check-input" type="checkbox" data-val="true" data-val-required="The checkbox required must be acknowledged" id="CheckboxRequired" name="CheckboxRequired" value="true" /><input name="CheckboxRequired" type="hidden" value="false" />
<label class="control-label" for="CheckboxRequired">Checkbox label</label>
</div><!-- end form-check custom-checkbox -->
<span class="field-validation-valid" data-valmsg-for="CheckboxRequired" data-valmsg-replace="true"></span>
</fieldset>

Checkbox guidance text

I am some guidance text

Checkbox label

Copy


                <turas-checkbox asp-for="CheckboxGuidanceText" checkbox-label="Checkbox label" guidance-text="I am some guidance text" hide-required-marker />

Copy


                <fieldset class="form-group form-single-checkbox "><legend class="control-label requiredFieldMarker suppressRequiredFieldMarker ">Checkbox guidance text</legend>
<div class="form-field-guidance-text">I am some guidance text</div>
<div class="form-check custom-checkbox">
<input class="form-check-input" type="checkbox" data-val="true" data-val-required="The Checkbox guidance text field is required." id="CheckboxGuidanceText" name="CheckboxGuidanceText" value="true" /><input name="CheckboxGuidanceText" type="hidden" value="false" />
<label class="control-label" for="CheckboxGuidanceText">Checkbox label</label>
</div><!-- end form-check custom-checkbox -->
<span class="field-validation-valid" data-valmsg-for="CheckboxGuidanceText" data-valmsg-replace="true"></span>
</fieldset>

Checkbox guidance text accordion

A paragraph.

List item
List item
List item

Checkbox label

Copy


                <turas-checkbox asp-for="CheckboxGuidanceTextAccordion" checkbox-label="Checkbox label" hide-required-marker>
                    <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>

Copy


                <fieldset class="form-group form-single-checkbox "><legend class="control-label requiredFieldMarker suppressRequiredFieldMarker ">Checkbox guidance text accordion</legend>
<div class="turas-form-guidance-collapse">
            <button class="turas-form-guidance-collapse-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-447860f8-1d54-475e-aa88-78b7c33191e0" aria-expanded="false" aria-controls="collapse-447860f8-1d54-475e-aa88-78b7c33191e0"><span class="visually-hidden">Guidance</span></button>              
            <div class="turas-form-guidance-collapse-content collapse" id="collapse-447860f8-1d54-475e-aa88-78b7c33191e0">   
                <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 class="form-check-input" type="checkbox" data-val="true" data-val-required="The Checkbox guidance text accordion field is required." id="CheckboxGuidanceTextAccordion" name="CheckboxGuidanceTextAccordion" value="true" /><input name="CheckboxGuidanceTextAccordion" type="hidden" value="false" />
<label class="control-label" for="CheckboxGuidanceTextAccordion">Checkbox label</label>
</div><!-- end form-check custom-checkbox -->
<span class="field-validation-valid" data-valmsg-for="CheckboxGuidanceTextAccordion" data-valmsg-replace="true"></span>
</fieldset>

Checkbox additional classes

Checkbox label

Copy


                <turas-checkbox asp-for="CheckboxAdditionalClasses" checkbox-label="Checkbox label" hide-required-marker additional-classes="remove-max-width" />

Copy


                <fieldset class="form-group form-single-checkbox remove-max-width"><legend class="control-label requiredFieldMarker suppressRequiredFieldMarker ">Checkbox additional classes</legend>
<div class="form-check custom-checkbox">
<input class="form-check-input" type="checkbox" data-val="true" data-val-required="The Checkbox additional classes field is required." id="CheckboxAdditionalClasses" name="CheckboxAdditionalClasses" value="true" /><input name="CheckboxAdditionalClasses" type="hidden" value="false" />
<label class="control-label" for="CheckboxAdditionalClasses">Checkbox label</label>
</div><!-- end form-check custom-checkbox -->
<span class="field-validation-valid" data-valmsg-for="CheckboxAdditionalClasses" data-valmsg-replace="true"></span>
</fieldset>

Checkbox in a row

Checkbox label

Checkbox in a row

Checkbox label

Copy


                <div class="row">
                    <div class="col-md-6">
                        <turas-checkbox asp-for="CheckboxInARowOne" checkbox-label="Checkbox label" hide-required-marker />
                    </div>
                    <div class="col-md-6">
                        <turas-checkbox asp-for="CheckboxInARowTwo" checkbox-label="Checkbox label" hide-required-marker />
                    </div>
                </div>

Copy


                <div class="row">
                    <div class="col-md-6">
                        <fieldset class="form-group form-single-checkbox "><legend class="control-label requiredFieldMarker suppressRequiredFieldMarker ">Checkbox in a row</legend>
<div class="form-check custom-checkbox">
<input class="form-check-input" type="checkbox" data-val="true" data-val-required="The Checkbox in a row field is required." id="CheckboxInARowOne" name="CheckboxInARowOne" value="true" /><input name="CheckboxInARowOne" type="hidden" value="false" />
<label class="control-label" for="CheckboxInARowOne">Checkbox label</label>
</div><!-- end form-check custom-checkbox -->
<span class="field-validation-valid" data-valmsg-for="CheckboxInARowOne" data-valmsg-replace="true"></span>
</fieldset>
                    </div>
                    <div class="col-md-6">
                        <fieldset class="form-group form-single-checkbox "><legend class="control-label requiredFieldMarker suppressRequiredFieldMarker ">Checkbox in a row</legend>
<div class="form-check custom-checkbox">
<input class="form-check-input" type="checkbox" data-val="true" data-val-required="The Checkbox in a row field is required." id="CheckboxInARowTwo" name="CheckboxInARowTwo" value="true" /><input name="CheckboxInARowTwo" type="hidden" value="false" />
<label class="control-label" for="CheckboxInARowTwo">Checkbox label</label>
</div><!-- end form-check custom-checkbox -->
<span class="field-validation-valid" data-valmsg-for="CheckboxInARowTwo" data-valmsg-replace="true"></span>
</fieldset>
                    </div>
                </div>

Checkbox in a row required

Checkbox label

Checkbox in a row required

Checkbox label

Copy


                <div class="row">
                    <div class="col-md-6">
                        <turas-checkbox asp-for="CheckboxRequiredInARowOne" checkbox-label="Checkbox label" />
                    </div>
                    <div class="col-md-6">
                        <turas-checkbox asp-for="CheckboxRequiredInARowTwo" checkbox-label="Checkbox label" />
                    </div>
                </div>

Copy


                <div class="row">
                    <div class="col-md-6">
                        <fieldset class="form-group form-single-checkbox "><legend class="control-label requiredFieldMarker  ">Checkbox in a row required</legend>
<div class="form-check custom-checkbox">
<input class="form-check-input" type="checkbox" data-val="true" data-val-required="The checkbox required required must be acknowledged" id="CheckboxRequiredInARowOne" name="CheckboxRequiredInARowOne" value="true" /><input name="CheckboxRequiredInARowOne" type="hidden" value="false" />
<label class="control-label" for="CheckboxRequiredInARowOne">Checkbox label</label>
</div><!-- end form-check custom-checkbox -->
<span class="field-validation-valid" data-valmsg-for="CheckboxRequiredInARowOne" data-valmsg-replace="true"></span>
</fieldset>
                    </div>
                    <div class="col-md-6">
                        <fieldset class="form-group form-single-checkbox "><legend class="control-label requiredFieldMarker  ">Checkbox in a row required</legend>
<div class="form-check custom-checkbox">
<input class="form-check-input" type="checkbox" data-val="true" data-val-required="The checkbox required required must be acknowledged" id="CheckboxRequiredInARowTwo" name="CheckboxRequiredInARowTwo" value="true" /><input name="CheckboxRequiredInARowTwo" type="hidden" value="false" />
<label class="control-label" for="CheckboxRequiredInARowTwo">Checkbox label</label>
</div><!-- end form-check custom-checkbox -->
<span class="field-validation-valid" data-valmsg-for="CheckboxRequiredInARowTwo" data-valmsg-replace="true"></span>
</fieldset>
                    </div>
                </div>

Checkbox hide validation message

Checkbox label

Copy


                <turas-checkbox asp-for="CheckboxRequiredHideValidationMessage" checkbox-label="Checkbox label" hide-validation-message />

Copy


                <fieldset class="form-group form-single-checkbox "><legend class="control-label requiredFieldMarker  ">Checkbox hide validation message</legend>
<div class="form-check custom-checkbox">
<input class="form-check-input" type="checkbox" data-val="true" data-val-required="The checkbox hide validation message must be acknowledged" id="CheckboxRequiredHideValidationMessage" name="CheckboxRequiredHideValidationMessage" value="true" /><input name="CheckboxRequiredHideValidationMessage" type="hidden" value="false" />
<label class="control-label" for="CheckboxRequiredHideValidationMessage">Checkbox label</label>
</div><!-- end form-check custom-checkbox -->
</fieldset>

Checkbox disabled

Checkbox label

Copy


                <turas-checkbox asp-for="CheckboxDisabled" checkbox-label="Checkbox label" hide-required-marker asp-is-disabled="True" />

Copy


                <fieldset class="form-group form-single-checkbox "><legend class="control-label requiredFieldMarker suppressRequiredFieldMarker ">Checkbox disabled</legend>
<div class="form-check custom-checkbox">
<input class="form-check-input" disabled="disabled" type="checkbox" data-val="true" data-val-required="The Checkbox disabled field is required." id="CheckboxDisabled" name="CheckboxDisabled" value="true" /><input name="CheckboxDisabled" type="hidden" value="false" />
<label class="control-label" for="CheckboxDisabled">Checkbox label</label>
</div><!-- end form-check custom-checkbox -->
<span class="field-validation-valid" data-valmsg-for="CheckboxDisabled" data-valmsg-replace="true"></span>
</fieldset>

Checkbox hide heading label

Copy


                <turas-checkbox asp-for="CheckboxHideHideHeadingLabel" hide-heading-label />

Copy


                <fieldset class="form-group form-single-checkbox "><legend class="control-label requiredFieldMarker  sr-only">Checkbox hide heading label</legend>
<div class="form-check custom-checkbox">
<input class="form-check-input" type="checkbox" data-val="true" data-val-required="The Checkbox hide heading label field is required." id="CheckboxHideHideHeadingLabel" name="CheckboxHideHideHeadingLabel" value="true" /><input name="CheckboxHideHideHeadingLabel" type="hidden" value="false" />
<label class="control-label" for="CheckboxHideHideHeadingLabel">Checkbox hide heading label</label>
</div><!-- end form-check custom-checkbox -->
<span class="field-validation-valid" data-valmsg-for="CheckboxHideHideHeadingLabel" data-valmsg-replace="true"></span>
</fieldset>

Parameters for turas-checkbox

asp-for - Binds the checkbox to a model property
checkbox-label - Sets the label text for the checkbox
hide-required-marker - Hides the required marker if the checkbox is required
heading-label - Sets a heading label for the checkbox
guidance-text - Provides additional guidance text for the checkbox
additional-classes - Allows for custom CSS classes to be added to the checkbox
asp-is-disabled - Disables the checkbox if set to true
hide-heading-label - Hides the heading label for the checkbox
hide-validation-message - Hides the validation message for the checkbox

Actions panel

Checkbox group

Examples

Usage

Parameters for turas-checkbox

Was this page helpful?