Switch

Using the switch class you can style your checkbox elements like a switch element.

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

By default, the switch will be displayed inactive, but you can add a checked attribute to the <input> element for displaying the switch as actived.

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

Customize

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

export default {
    forms: {
        switch: {
            color: "primary",
        },
    },
    // ...other configuration
};