Checkbox

Style your checkbox elements adding the checkbox style to the <input> element.

Default checkbox

<label class="label" for="checkbox0">
    <span class="has-mr-2">Default checkbox</span>
    <input type="checkbox" id="checkbox0" class="checkbox" />
</label>

By default, the checkbox will be displayed unchecked, but you can add a checked attribute to the <input> element to display the checkbox as checked, or use the is-active modifier to manually display it as active.

Active checkbox

<label class="label" for="checkbox1">
    <span class="has-mr-2">Active checkbox</span>
    <input type="checkbox" id="checkbox1" class="checkbox" checked />
</label>

Checkboxes can also display the indeterminate state. Remember that there is no HTML attribute to set this state, the only way to set this state is via JavaScript.

<input type="checkbox" id="checkbox4" class="checkbox" />

<!-- Set the indeterminate state via javascript -->
<script type="text/javascript">
    document.getElementById("checkbox4").indeterminate = true;
</script>

Customize

The checkbox element will apply the styles defined in the forms.checkbox field of your theme configuration.

siimple.config.js

export default {
    forms: {
        checkbox: {
            backgroundColor: "muted",
            color: "white",
            "&:checked, &:indeterminate": {
                backgroundColor: "primary",
            },
            "&:indeterminate:after": {
                borderBottomColor: "white",
            },
            "&:checked:after": {
                borderBottomColor: "white",
                borderLeftColor: "white",
            },
        },
    },
};

Card

Designed and maintained with by @jmjuanes.

Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.

Currently v4.3.1

Repository

Issues

Releases