S.UI

Switch

We use the @headlessui/vue switch components.

Basic example

Switches are built using the Switch component, which takes in a ref via the v-model prop. You can toggle your Switch by clicking directly on the component, or by pressing the spacebar while its focused.

WARNING

Ensure you change the components definition to include Hui as a prefix, as some component names conflict with native HTML element names and will not work.

<template>
    <hui-switch v-model="enabled" :class="enabled ? 'bg-teal-900' : 'bg-teal-700'" class="relative inline-flex items-center h-6 rounded-full w-11">
        <span class="sr-only">Enable notifications</span>
        <span :class="enabled ? 'translate-x-6' : 'translate-x-1'" class="inline-block w-4 h-4 transform bg-white rounded-full" />
    </hui-switch>
</template>

<script>
import { Switch } from '@headlessui/vue';

export default {
    components: {
        HuiSwitch: Switch,
    },
};

</script>

Further reading

Refer to @headlessui/vue for more examples and documentation.