Toggles - AvToggle

✨ Introduction

The AvToggle is a versatile Vue component, designed to allow the user to choose between two opposite states (active/inactive).

🏗️ Structure

None.

🏷️ Props

Name	Type	Default	Mandatory	Description
modelValue	boolean	undefined		Boolean value linked to the input.
description	string	undefined		Indicates the purpose of the toggle.
id	string	toggle-${crypto.randomUUID()}		Unique id for the toggle. Used for accessibility.
disabled	boolean	undefined		Indicates if the toggle is disabled.
disabledTooltip	string	undefined		Tooltip text displayed when the toggle is disabled.
activeText	string	'On'		Text to display next to the toggle (right) when it is active.
inactiveText	string	'Off'		Text to display next to the toggle (right) when it is inactive.
name	string	undefined		name attribute of the input.
statusTextWidth	string	'1.8rem'		Width of the active/inactive texts.

🔊 Events

None.

🎨 Slots

Name	Description
default	Slot to customize the content displayed next to the toggle. Receives a prop active indicating the current state of the toggle.

🚀 Storybook demos

You can find examples of use and demo of the component on its dedicated Storybook page.

💡 Examples of use

<script>
const state = ref(false)
</script>

<template>
  <AvToggle
    v-model="state"
    description="Awesome toggle"
  />
</template>