Lightswitch Component

The Lightswitch component is built with Vue 3 and Headless UI. Possibility to add an Label with a custom Slot.

Basic Usage

Import and use Lightswitch in your Vue components as follows:

<template>
  <Lightswitch v-model="lightswitch1" />
</template>

<script setup>
import { Lightswitch } from '@robuust-digital/vue-components';
</script>

Slots

Below is example to edit the custom slot of Lightswitch:

Lightswitch with a custom slot

Every year (save 10%)

Show code

<template>
  <Lightswitch v-model="lightswitch">
    Every year <span class="rvc-font-normal rvc-text-slate-600">(save 10%)</span>
  </Lightswitch>
</template>

Customization with Tailwind CSS

To customize the lightswitch styles globally, extend your Tailwind configuration. Example:

// tailwind.config.js
import components from '@robuust-digital/vue-components/tailwind';

export default {
  // ...
  theme: {
    extend: {
      components: (theme) => ({
        lightswitch: {   
          '--rvc-lightswitch-border-radius': theme('borderRadius.full'),
          '--rvc-lightswitch-height': '1.875rem',
          '--rvc-lightswitch-width': '3.125rem',
          '--rvc-lightswitch-bg-color': theme('colors.slate.200'),
          '--rvc-lightswitch-bg-color-enabled': theme('colors.green.400'),
          '--rvc-lightswitch-transition-property': theme('transitionProperty.colors'),
          '--rvc-lightswitch-transition-duration': theme('transitionDuration.DEFAULT'),
          '--rvc-lightswitch-transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
          '--rvc-lightswitch-label-offset': '0.5rem',
          '--rvc-lightswitch-toggle-offset': '0.1875rem',
          '--rvc-lightswitch-toggle-size': theme('width.6'),
          '--rvc-lightswitch-toggle-bg-color': theme('colors.white'),
          '--rvc-lightswitch-toggle-transition-property': theme('transitionProperty.transform'),
          '--rvc-lightswitch-toggle-transition-duration': theme('transitionDuration.DEFAULT'),
          '--rvc-lightswitch-toggle-transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
        },
      }),
    },
  },
  plugins: [components],
};

Examples

Default lightswitch

Show code

<Lightswitch v-model="lightswitch"/>

Checked lightswitch

Show code

<Lightswitch v-model="lightswitch"/>