A checkbox (check box, tickbox, tick box) is a GUI widget that permits the user to make a binary choice, i.e. a choice between one of two possible mutually exclusive options. For example, the user may have to answer 'yes' (checked) or 'no' (not checked) on a simple yes/no question.

For a better UI/UX experience, we use a slightly more complex nesting of divs to create the clean look below. Coming soon, colors of the box can change based on the classes:

                    <div class="checkboxes checkboxes--icons">
                        <label class="checkbox--label" for="checkbox-custom">
                            <span class="checkbox--text">Custom Checkbox</span>
                            <input type="checkbox" class="checkbox" id="checkbox-custom" checked="">
                            <span class="checkbox--icon"></span>
                        </label>
                    </div>
                  

To utilize, Insert a checkbox-specific molecule partial called "CheckboxMolecule" via an Html Helper Extension method. Checkbox Molecule allows you to send in as many "CheckboxAtom" html helpers as needed. Each Checkbox Atom has a required Text parameter. You must wrap the Html helpers with "@<text></text>". It's recommended you wrap the tags so easier to read and edit. Provide optional parameters by entering the parameter name followed by ':' and the value.

@Html.CheckboxMolecule(@<text> @Html.CheckboxAtom("test_1", "Option 1") @Html.CheckboxAtom("test_2", "Option 2", disabled: true) @Html.CheckboxAtom("test_3", "Option with Tooltip", tooltip: "Option with Tooltip", tooltipPlacement: TooltipPlacementEnum.Bottom) <text>)