2 years ago

In this tutorial we're going to build a form component for a checkbox but styled as a toggle. The functionality for this toggle will be just like a checkbox but will move the toggle when the checkbox is checked. We will also need to style this differently depending on the state of the checkbox.

As this is a form component it will be nice if we can add this to existing forms by using a html tag `form-toggle` and assign the `v-model` to a value in the parent component.

https://paulund.co.uk/how-to-create-a-toggle-vuejs-component#undefined Finally to style the checkbox as a toggle we can use a previous article to help, looking at [How To Style A Checkbox With CSS](https://paulund.co.uk/how-to-style-a-checkbox-with-css) we can pick any of the checkboxes and use this for the CSS on the toggle.