Checkboxes

Checkboxes are most commonly used to give users a way to make a range of selections ( one or more). They may also be used as a way to have users indicate they agree to specific terms and services.

Interactive demo

Example

<div class="container">
                    <h2 class="text-center">Checkbox</h2>
                    <div class="container text-left bordered">
                        <h5>Checkbox Group (Stacked)</h5>
                        <div class="form-group">
                            <div class="form-check"> <label class="form-check-label" for="CheckboxDefault1"> <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault1"> Checkbox 1 (Default) <span class="checkbox-overlay "></span> </label> </div>
                            <div class="form-check"> <label class="form-check-label" for="CheckboxDefault2"> <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault2"> Checkbox 2 (Default) <span class="checkbox-overlay "></span> </label> </div>
                            <div class="form-check"> <label class="form-check-label" for="CheckboxDefault3"> <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault3" checked=""> Checkbox 3 (Selected) <span class="checkbox-overlay "></span> </label> </div>
                            <div class="form-check"> <label class="form-check-label" for="CheckboxDefault4"> <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault4" disabled=""> Checkbox 4(Disabled Default) <span class="checkbox-overlay "></span> </label> </div>
                            <div class="form-check"> <label class="form-check-label" for="CheckboxDefault5"> <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault5"> Checkbox 5 <span class="checkbox-overlay "></span>
                                </label> </div>
                        </div>
                    </div>
                    <div class="container text-left bordered">
                        <h5>Checkbox Group (Stacked) with error</h5>
                        <div class="form-group field-has-error">
                            <div class="form-check"> <label class="form-check-label" for="CheckboxDefault121"> <input class="form-check-input" type="checkbox" name="CheckboxDefault11" id="CheckboxDefault121"> Checkbox 1 (Default) <span class="checkbox-overlay "></span> </label> </div>
                            <div class="form-check"> <label class="form-check-label" for="CheckboxDefault222"> <input class="form-check-input" type="checkbox" name="CheckboxDefault11" id="CheckboxDefault222"> Checkbox 2 (Default) <span class="checkbox-overlay "></span> </label> </div>
                            <div class="form-check"> <label class="form-check-label" for="CheckboxDefault333"> <input class="form-check-input" type="checkbox" name="CheckboxDefault11" id="CheckboxDefault333"> Checkbox 3 (Selected) <span class="checkbox-overlay "></span> </label> </div>
                            <div class="form-check"> <label class="form-check-label" for="CheckboxDefault444"> <input class="form-check-input" type="checkbox" name="CheckboxDefault11" id="CheckboxDefault444"> Checkbox 4(Disabled Default) <span class="checkbox-overlay "></span> </label> </div>
                            <div class="form-check"> <label class="form-check-label" for="CheckboxDefault555"> <input class="form-check-input" type="checkbox" name="CheckboxDefault11" id="CheckboxDefault555"> Checkbox 5 <span class="checkbox-overlay "></span>
                                </label> </div>
                            <span class="message text-danger"><i class="fas fa-minus-circle mr-1"></i>This is an
                                error message. </span>
                        </div>
                    </div>
                    <div class="container text-left bordered">
                        <h5>Checkbox Group (Inline)</h5>
                        <div class="form-group">
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="CheckboxDefault21"> <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault21"> Checkbox 1 (Default) <span class="checkbox-overlay "></span> </label> </div>
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="CheckboxDefault22"> <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault22"> Checkbox 2 (Default) <span class="checkbox-overlay "></span> </label> </div>
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="CheckboxDefault23"> <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault23" checked=""> Checkbox 3 (Selected)
                                    <span class="checkbox-overlay "></span> </label> </div>
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="CheckboxDefault24"> <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault24" disabled=""> Checkbox 4(Disabled
                                    Default) <span class="checkbox-overlay "></span> </label> </div>
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="CheckboxDefault25"> <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault25"> Checkbox 5 <span class="checkbox-overlay "></span> </label> </div>
                        </div>
                    </div>
                    <div class="container text-left bordered">
                        <h5>Checkbox Group (Inline)</h5>
                        <div class="form-group field-has-error">
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="CheckboxDefault2111"> <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault2111"> Checkbox 1 (Default) <span class="checkbox-overlay "></span> </label> </div>
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="CheckboxDefault2211"> <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault2211"> Checkbox 2 (Default) <span class="checkbox-overlay "></span> </label> </div>
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="CheckboxDefault2311"> <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault2311"> Checkbox 3 (Selected) <span class="checkbox-overlay "></span> </label> </div>
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="CheckboxDefault2411"> <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault2411"> Checkbox 4(Disabled Default)
                                    <span class="checkbox-overlay "></span> </label> </div>
                            <div class="form-check form-check-inline"> <label class="form-check-label" for="CheckboxDefault2511"> <input class="form-check-input" type="checkbox" name="CheckboxDefault" id="CheckboxDefault2511"> Checkbox 5 <span class="checkbox-overlay "></span> </label> </div>
                            <span class="message text-danger"><i class="fas fa-minus-circle mr-1"></i>This is an
                                error message. </span>
                        </div>
                    </div>
                </div>

When to use

Checkboxes should be used when:

• You want users to select multiple items from a predetermined list of items.

• Your users need to see all available options at once.

• When users need to agree to terms and conditions

Checkboxes should not be used for:

• If user needs to select 1 option from a predetermined list of items, using radio buttons would be more appropriate.