Toggle

A toggle is a switch that can be turned on or off. I can be used to change settings, toggle options, and may more.

Preview & Playground 🖼️

Here you may find a preview of the component, with error & possible variants.

🏄 Click to expand the code

vue

<script setup lang="ts">
import { Toggle } from '@flavorly/vanilla-components'
import { ref } from 'vue'

const value = ref('accepted')
const value2 = ref(true)
const valueMultiple = ref([])
</script>

<template>
  <PreviewWrapper>
    <div class="flex items-center justify-center mx-auto text-center mt-2">
      <!-- Regular -->
      <Toggle
        v-model="value"
        value="accepted"
        checked-value="accepted"
        unchecked-value="notAccepted"
        feedback="Im useful helper out here, choose wisely"
        align="center-center"
      />
    </div>

    <div class="flex items-center justify-center mx-auto text-center mt-2">
      <pre class="text-xs">{{ JSON.stringify(value) }}</pre>
    </div>

    <div class="h-1 my-5" />

    <div class="flex items-center justify-center mx-auto text-center mt-2">
      <!-- Disabled -->
      <Toggle
        v-model="value"
        :disabled="true"
        value="accepted"
        checked-value="accepted"
        unchecked-value="notAccepted"
        feedback="Im disabled and you shouldnt be able to toggle me"
        align="center-center"
      />
    </div>

    <div class="h-1 my-5" />

    <div class="flex items-center justify-center space-x-2">
      <!-- Multiple -->
      <Toggle
        v-model="valueMultiple"
        value="accepted"
        checked-value="accepted"
        unchecked-value="notAccepted"
        class="inline-flex"
      />

      <Toggle
        v-model="valueMultiple"
        value="accepted2"
        checked-value="accepted2"
        unchecked-value="notAccepted2"
        class="inline-flex"
      />
    </div>

    <div class="flex items-center justify-center mx-auto text-center mt-2">
      <pre class="text-xs">{{ JSON.stringify(valueMultiple) }}</pre>
    </div>

    <div class="h-1 my-5" />

    <!-- Errors -->
    <div class="flex items-center justify-center mx-auto text-center mt-2">
      <Toggle
        v-model="value2"
        errors="Sorry for this name is already taken"
        feedback="I only show when i dont have errors"
        align="center-center"
      />
    </div>

    <div class="flex items-center justify-center mx-auto text-center mt-2">
      <pre class="text-xs">{{ JSON.stringify(value2) }}</pre>
    </div>
  </PreviewWrapper>
</template>

Props 📥

Props available for this component extending the default variant & global props.

Prop	Description	Accepted Values	Default
`modelValue`	The value for the element	`Any`	`undefined`
`checked`	Default state for toggle	`Boolean`	`false`
`value`	Initial value	`[Boolean,Any]`	`false'`
`checkedValue`	Checked Value	`[Boolean,Any]`	`true'`
`uncheckedValue`	Un-checked Value	`[Boolean,Any]`	`false'`
`align`	Position of the toggle	`['left-top', 'left-center', 'left-bottom','right-bottom', ..]`	`left-top'`
`icon`	If we should show the icon	`Boolean`	`true`

Slots 🧬

Current slots available for this component are the following:

Slot `unchecked`

Slot to override the icon for the unchecked state

Slot `checked`

Slot to override the icon for the checked state

Slot `default`

The default slot is used to display the label of the toggle, but you can be creative to do whatever you want.

Attribute	Description	Type
`errors`	The errors being injected	`[String, Array, Undefined]`
`feedback`	The feedback message	`[String, Undefined]`
`hasErrors`	If it has errors	`Boolean`

Slot `errors`

Slot that holds the error messages when the component errors prop is defined.

Attribute	Description	Type
`errors`	The errors being injected	`[String, Array, Undefined]`
`feedback`	The feedback message	`[String, Undefined]`
`hasErrors`	If it has errors	`Boolean`

Slot `feedback`

Slot that holds the feedback messages when the component feedback prop is defined. When showing errors the feedback will be hidden by default, and vice-versa.

Attribute	Description	Type
`errors`	The errors being injected	`[String, Array, Undefined]`
`feedback`	The feedback message	`[String, Undefined]`
`hasErrors`	If it has errors	`Boolean`

Events 🚇

Here you may find the events emitted by this component.

Event	Description	Value
`update:modelValue`	When the value changes	`any`

| click | When element is clicked | ClickEvent |

Toggle Groups

A toggle group is a group of checkboxes, it's a wrapper for multiple checkboxes, it's a way to group checkboxes together. A nice use-case for this, is whenever you want to select multiple items at once, like a list of items.

🏄 Click to expand the code

vue

<script setup lang="ts">
import { ToggleGroup } from '@flavorly/vanilla-components'
import { ref } from 'vue'
const value = ref([])
const value2 = ref([])
</script>

<template>
  <PreviewWrapper>
    <ToggleGroup
      v-model="value"
      name="skills"
      :options="[
        { text: 'Vue', value: 'vue', description: 'Is Vue your stack?' },
        { text: 'React', value: 'react', description: 'React just sucks right?' },
        { text: 'Angular', value: 'angular', description: 'Lets not talk about angular' },
        { text: 'Svelte', value: 'svelte', description: 'Maybe we can try some day' },
        { text: 'Ember', value: 'ember', description: 'Good stuff, but... vue' },
      ]"
    />
    <div class="flex items-center justify-center mx-auto text-center mt-2">
      <pre class="text-xs">{{ JSON.stringify(value) }}</pre>
    </div>

    <div class="h-1 my-5" />

    <div class="mb-5">
      Disabled Group
    </div>

    <ToggleGroup
      v-model="value2"
      name="disabled"
      :disabled="true"
      :options="[
        { text: 'Vue', value: 'vue2', description: 'Is Vue your stack?' },
        { text: 'React', value: 'react2', description: 'React just sucks right?' },
        { text: 'Angular', value: 'angular2', description: 'Lets not talk about angular' },
        { text: 'Svelte', value: 'svelte2', description: 'Maybe we can try some day' },
        { text: 'Ember', value: 'ember2', description: 'Good stuff, but... vue' },
      ]"
    />
    <div class="flex items-center justify-center mx-auto text-center mt-2">
      <pre class="text-xs">{{ JSON.stringify(value) }}</pre>
    </div>
  </PreviewWrapper>
</template>

Toggle Group Props 📥

Props available for this component extending the default variant & global props.

Prop	Description	Accepted Values	Default
`modelValue`	A v-model for the elements	`Array`	`undefined`
`options`	Array of options for the select	`Array`	`undefined`
`normalizeOptions`	If we should normalize the options	`Array`	`undefined`
`valueAttribute`	Value Attribute key to search on options	`String`	`undefined`
`textAttribute`	Label Attribute key to search on options	`String`	`undefined`

Toggle Group Options

The options for the toggle group, works exactly the same way as the options for RichSelect. Passing options without any structure defined, will require you to fill the valueAttribute and textAttribute props so we can grab them from your options

Here is a small example of normalized options:

[
    {
    value: 'batman',
    text: 'Batman',
    description: 'The Dark Knight',
    },
    {
        value: 'robin',
        text: 'Robin',
        description: 'The Dark Knight\'s sidekick',
    },
]

Toggle #

Preview & Playground 🖼️ #

Props 📥 #

Slots 🧬 #

Slot unchecked #

Slot checked #

Slot default #

Slot errors #

Slot feedback #

Events 🚇 #

Toggle Groups #

Toggle Group Props 📥 #

Toggle Group Options #