UI Development with Chakra UI Vue — Switch

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Switch

We can add a switch component with Chakra UI Vue.

For instance, we can write:

<template>
  <c-box>
    <c-form-control>
      <c-form-label html-for="email-alerts">Enable email alerts?</c-form-label>
      <c-switch id="email-alerts" />
    </c-form-control>
  </c-box>
</template>

<script>
import { CBox, CSwitch, CFormControl, CFormLabel } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CSwitch,
    CFormControl,
    CFormLabel,
  },
};
</script>

We can add a c-switch component to add a switch.

c-form-label is the label for the switch.

c-form-control is the container.

We can change its size with the size prop:

<template>
  <c-box>
    <c-switch size="lg" />
  </c-box>
</template>

<script>
import { CBox, CSwitch } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CSwitch,
  },
};
</script>

lg makes it large.

We can also set it to sm to make it small, or md to make it medium-sized.

Also, we can change the color when the switch is on with the color prop:

<template>
  <c-box>
    <c-switch color="vue" />
  </c-box>
</template>

<script>
import { CBox, CSwitch } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CSwitch,
  },
};
</script>

Conclusion

We can add a switch with the c-switch component.