Introduction to Spectre Form Checkbox

Spectre Form Checkbox is a form element used for allowing users to select multiple options from a list of options. This is done by checking multiple checkboxes at the same time.

Getting Started

To use Spectre Form Checkbox, you must first include the Spectre CSS and JS files in your project. You can do this by downloading the Spectre files from their website, or you can use a CDN to load the files directly into your project.

<!--spectre.css-->
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<!--spectre.js-->
<script src="https://unpkg.com/spectre.css/dist/spectre.min.js"></script>

Creating a Checkbox

To create a checkbox, use the input element with the type="checkbox" attribute. You can also add a label to the checkbox to provide more information about what the checkbox is for.

<label class="form-checkbox">
    <input type="checkbox">
    <i class="form-icon"></i> Checkbox
</label>

Styling the Checkbox

Spectre provides a few classes for styling checkboxes. You can use these classes to customize the appearance of the checkbox to match your website's design.

<label class="form-checkbox">
    <input type="checkbox" checked>
    <i class="form-icon"></i> Checkbox
</label>

The checked attribute sets the checkbox to be checked by default. You can also use the form-checkbox-inline class to display checkboxes inline with other form elements.

<label class="form-checkbox-inline">
    <input type="checkbox" checked>
    <i class="form-icon"></i> Checkbox
</label>

Conclusion

Spectre Form Checkbox is a simple and easy-to-use form element for allowing users to select multiple options. With its customizable styling options, you can easily match the appearance of the checkbox to your website's design.