PricingToggle

A customizable Toggle to switch the payment frequency.

Usage

Built on top of the Headless UI Switch component, use a v-model to bind the value of the toggle.

<script setup>
const isYearly = ref(false)
</script>

<template>
  <UPricingToggle v-model="isYearly" class="max-w-xs" />
</template>

Slots

left
{}
right
{}

Props

ui
{}
{}
left
string
"Monthly"
right
string
"Yearly"
modelValue
boolean
false