Components
The Toggle Count Component allows users to switch from one value to another, commonly utilized on pricing pages for toggling between different pricing structures like monthly and annual rates. It offers a clear, user-friendly interface, enhancing the decision-making process for potential customers by simplifying the comparison of distinct values.
Note that this component requires the use of our Toggle Count plugin, else you can skip this message if you are already using Preline UI as a package.
A checkbox usage.
19
89
129
<!-- Toggle -->
<div class="flex justify-end mb-3">
<div id="toggle-count" class="p-0.5 inline-block bg-gray-100 rounded-lg dark:bg-gray-700">
<label for="toggle-count-monthly" class="relative inline-block py-2 px-3">
<span class="inline-block relative z-10 text-sm font-medium text-gray-800 cursor-pointer dark:text-gray-200">
Monthly
</span>
<input id="toggle-count-monthly" name="toggle-count" type="radio" class="absolute top-0 end-0 w-full h-full border-transparent bg-transparent bg-none text-transparent rounded-lg cursor-pointer before:absolute before:inset-0 before:w-full before:h-full before:rounded-lg focus:ring-offset-0 checked:before:bg-white checked:before:shadow-sm checked:bg-none focus:ring-transparent dark:checked:before:bg-gray-800 dark:focus:ring-offset-transparent">
</label>
<label for="toggle-count-annual" class="relative inline-block py-2 px-3">
<span class="inline-block relative z-10 text-sm font-medium text-gray-800 cursor-pointer dark:text-gray-200">
Annual
</span>
<input id="toggle-count-annual" name="toggle-count" type="radio" class="absolute top-0 end-0 w-full h-full border-transparent bg-transparent bg-none text-transparent rounded-lg cursor-pointer before:absolute before:inset-0 before:w-full before:h-full before:rounded-lg focus:ring-offset-0 checked:before:bg-white checked:before:shadow-sm checked:bg-none focus:ring-transparent dark:checked:before:bg-gray-800 dark:focus:ring-offset-transparent" checked>
</label>
</div>
</div>
<!-- End Toggle -->
<!-- Card Grid -->
<div class="grid grid-cols-3 lg:items-center border border-gray-200 rounded-xl dark:border-gray-700">
<!-- Card -->
<div class="flex flex-col p-4">
<h4 class="text-gray-800 mb-1 dark:text-gray-200">Startup</h4>
<div class="flex gap-x-1">
<span class="text-xl font-normal text-gray-800 dark:text-gray-200">$</span>
<p data-hs-toggle-count='{
"target": "#toggle-count",
"min": 19,
"max": 29
}' class="text-gray-800 font-semibold text-3xl dark:text-gray-200">
19
</p>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="flex flex-col p-4">
<div class="flex justify-between">
<h4 class="text-gray-800 mb-1 dark:text-gray-200">Team</h4>
</div>
<div class="flex gap-x-1">
<span class="text-xl font-normal text-gray-800 dark:text-gray-200">$</span>
<p data-hs-toggle-count='{
"target": "#toggle-count",
"min": 89,
"max": 99
}' class="text-gray-800 font-semibold text-3xl dark:text-gray-200">
89
</p>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="flex flex-col p-4">
<h4 class="text-gray-800 mb-1 dark:text-gray-200">Enterprise</h4>
<div class="flex gap-x-1">
<span class="text-xl font-normal text-gray-800 dark:text-gray-200">$</span>
<p data-hs-toggle-count='{
"target": "#toggle-count",
"min": 129,
"max": 149
}' class="text-gray-800 font-semibold text-3xl dark:text-gray-200">
129
</p>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Card Grid -->
A switch usage.
19
89
129
<!-- Toggle -->
<div class="flex justify-center mb-4">
<div>
<label for="toggle-count-switch" class="inline-block p-2">
<span class="inline-block text-sm text-gray-800 cursor-pointer dark:text-gray-200">
Monthly
</span>
</label>
<input id="toggle-count-switch" name="toggle-count-switch" type="checkbox" class="relative w-[3.25rem] h-7 bg-gray-100 checked:bg-none checked:bg-blue-600 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 border border-transparent ring-1 ring-transparent focus:border-blue-600 focus:ring-blue-600 ring-offset-white focus:outline-none appearance-none dark:bg-gray-700 dark:checked:bg-blue-600 dark:focus:ring-offset-gray-800
before:inline-block before:w-6 before:h-6 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:shadow before:rounded-full before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-gray-400 dark:checked:before:bg-blue-200">
<label for="toggle-count-switch" class="inline-block p-2">
<span class="inline-block text-sm text-gray-800 cursor-pointer dark:text-gray-200">
Annual
</span>
</label>
</div>
</div>
<!-- End Toggle -->
<!-- Grid -->
<div class="grid grid-cols-3 lg:items-center border border-gray-200 rounded-xl dark:border-gray-700">
<!-- Card -->
<div class="flex flex-col p-4">
<h4 class="text-gray-800 mb-1 dark:text-gray-200">Startup</h4>
<div class="flex gap-x-1">
<span class="text-xl font-normal text-gray-800 dark:text-gray-200">$</span>
<p data-hs-toggle-count='{
"target": "#toggle-count-switch",
"min": 19,
"max": 29
}' class="text-gray-800 font-semibold text-3xl dark:text-gray-200">
19
</p>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="flex flex-col p-4">
<div class="flex justify-between">
<h4 class="text-gray-800 mb-1 dark:text-gray-200">Team</h4>
</div>
<div class="flex gap-x-1">
<span class="text-xl font-normal text-gray-800 dark:text-gray-200">$</span>
<p data-hs-toggle-count='{
"target": "#toggle-count-switch",
"min": 89,
"max": 99
}' class="text-gray-800 font-semibold text-3xl dark:text-gray-200">
89
</p>
</div>
</div>
<!-- End Card -->
<!-- Card -->
<div class="flex flex-col p-4">
<h4 class="text-gray-800 mb-1 dark:text-gray-200">Enterprise</h4>
<div class="flex gap-x-1">
<span class="text-xl font-normal text-gray-800 dark:text-gray-200">$</span>
<p data-hs-toggle-count='{
"target": "#toggle-count-switch",
"min": 129,
"max": 149
}' class="text-gray-800 font-semibold text-3xl dark:text-gray-200">
129
</p>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Grid -->