Tailwind CSS Toggle Count

Toggle count from one value to another.

Installation

To get started, install Toggle Count plugin via npm, else you can skip this step if you are already using Preline UI as a package.

Terminal

npm i @preline/toggle-count

Example

Toggle between monthly to annually pricing options.

Monthly Annual / 15% off

Startup

2 users
Plan features
Product support

Team

Hot

5 users
Plan features
Product support

Enterprise

129

10 users
Plan features
Product support

<div class="flex justify-center mb-6">
  <div id="toggle-count" class="p-1 inline-block bg-white rounded-lg dark:bg-neutral-800">
    <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-neutral-200">
        Monthly
      </span>
      <input id="toggle-count-monthly" name="toggle-count" type="radio" class="absolute top-0 end-0 size-full border-transparent bg-transparent bg-none text-transparent rounded-lg cursor-pointer before:absolute before:inset-0 before:size-full before:rounded-lg checked:before:bg-gray-200 checked:bg-none focus:ring-transparent focus:ring-offset-0 dark:checked:before:bg-neutral-700">
    </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-neutral-200">
        Annual / 15% off
      </span>
      <input id="toggle-count-annual" name="toggle-count" type="radio" class="absolute top-0 end-0 size-full border-transparent bg-transparent bg-none text-transparent rounded-lg cursor-pointer before:absolute before:inset-0 before:size-full before:rounded-lg checked:before:bg-gray-200 checked:bg-none focus:ring-transparent focus:ring-offset-0 dark:checked:before:bg-neutral-700" checked="">
    </label>
  </div>
</div>

<!-- Grid -->
<div class="grid sm:grid-cols-3 lg:items-center bg-white rounded-xl divide-x divide-gray-200 dark:bg-neutral-800 dark:divide-neutral-700">
  <!-- Card -->
  <div class="flex flex-col p-4">
    <h4 class="text-gray-800 mb-1 dark:text-neutral-200">Startup</h4>
    <div class="flex gap-x-1">
      <span class="text-xl font-normal text-gray-800 dark:text-neutral-200">$</span>
      <p data-hs-toggle-count='{
          "target": "#toggle-count",
          "min": 19,
          "max": 29
        }' class="text-gray-800 font-semibold text-3xl dark:text-neutral-200">
        19
      </p>
    </div>

    <ul class="mt-5 space-y-2 text-sm">
      <li class="flex items-center space-x-2">
        <svg class="shrink-0 size-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="20 6 9 17 4 12"></polyline>
        </svg>
        <span class="text-gray-500 dark:text-neutral-400">
          2 users
        </span>
      </li>

      <li class="flex items-center space-x-2">
        <svg class="shrink-0 size-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="20 6 9 17 4 12"></polyline>
        </svg>
        <span class="text-gray-500 dark:text-neutral-400">
          Plan features
        </span>
      </li>

      <li class="flex items-center space-x-2">
        <svg class="shrink-0 size-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="20 6 9 17 4 12"></polyline>
        </svg>
        <span class="text-gray-500 dark:text-neutral-400">
          Product support
        </span>
      </li>
    </ul>

    <button type="button" class="mt-4 py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
      Get started
    </button>
  </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-neutral-200">Team</h4>
      <div>
        <span class="inline bg-violet-500 font-medium text-white text-[10px] leading-4 uppercase rounded-md py-1 px-2">
          Hot
        </span>
      </div>
    </div>
    <div class="flex gap-x-1">
      <span class="text-xl font-normal text-gray-800 dark:text-neutral-200">$</span>
      <p data-hs-toggle-count='{
          "target": "#toggle-count",
          "min": 89,
          "max": 99
        }' class="text-gray-800 font-semibold text-3xl dark:text-neutral-200">
        89
      </p>
    </div>

    <ul class="mt-5 space-y-2 text-sm">
      <li class="flex items-center space-x-2">
        <svg class="shrink-0 size-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="20 6 9 17 4 12"></polyline>
        </svg>
        <span class="text-gray-500 dark:text-neutral-400">
          5 users
        </span>
      </li>

      <li class="flex items-center space-x-2">
        <svg class="shrink-0 size-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="20 6 9 17 4 12"></polyline>
        </svg>
        <span class="text-gray-500 dark:text-neutral-400">
          Plan features
        </span>
      </li>

      <li class="flex items-center space-x-2">
        <svg class="shrink-0 size-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="20 6 9 17 4 12"></polyline>
        </svg>
        <span class="text-gray-500 dark:text-neutral-400">
          Product support
        </span>
      </li>
    </ul>

    <button type="button" class="mt-4 py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
      Get started
    </button>
  </div>
  <!-- End Card -->

  <!-- Card -->
  <div class="flex flex-col p-4">
    <h4 class="text-gray-800 mb-1 dark:text-neutral-200">Enterprise</h4>
    <div class="flex gap-x-1">
      <span class="text-xl font-normal text-gray-800 dark:text-neutral-200">$</span>
      <p data-hs-toggle-count='{
          "target": "#toggle-count",
          "min": 129,
          "max": 149
        }' class="text-gray-800 font-semibold text-3xl dark:text-neutral-200">
        129
      </p>
    </div>

    <ul class="mt-5 space-y-2 text-sm">
      <li class="flex items-center space-x-2">
        <svg class="shrink-0 size-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="20 6 9 17 4 12"></polyline>
        </svg>
        <span class="text-gray-500 dark:text-neutral-400">
          10 users
        </span>
      </li>

      <li class="flex items-center space-x-2">
        <svg class="shrink-0 size-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="20 6 9 17 4 12"></polyline>
        </svg>
        <span class="text-gray-500 dark:text-neutral-400">
          Plan features
        </span>
      </li>

      <li class="flex items-center space-x-2">
        <svg class="shrink-0 size-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="20 6 9 17 4 12"></polyline>
        </svg>
        <span class="text-gray-500 dark:text-neutral-400">
          Product support
        </span>
      </li>
    </ul>

    <button type="button" class="mt-4 py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-hidden focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
      Get started
    </button>
  </div>
  <!-- End Card -->
</div>
<!-- End Grid -->

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

<div>
  <div id="toggle-count">
    <label>
      Monthly
      <input id="toggle-count-monthly" name="toggle-count" type="radio" class="hidden">
    </label>
    <label>
      Annual
      <input id="toggle-count-annual" name="toggle-count" type="radio" class="hidden" checked/>
    </label>
  </div>
</div>

<div class="space-x-5">
  <span data-hs-toggle-count='{
      "target": "#toggle-count",
      "min": 19,
      "max": 29
    }'>
    19
  </span>

  <span data-hs-toggle-count='{
      "target": "#toggle-count",
      "min": 89,
      "max": 99
    }'>
    89
  </span>

  <span data-hs-toggle-count='{
      "target": "#toggle-count",
      "min": 129,
      "max": 149
    }'>
    129
  </span>
</div>

JavaScript behavior

Data Options

Name	Description	Options	Default value
`data-hs-toggle-count`	Activate a Toggle Count by specifying on an element. Should be added to the container.	—	—
`:target` (required)	Determines which element will be observed. This must be a valid selector.	string	—
`:min`	Specifies default number.	number	`0`
`:max`	Specifies the number to which the count up will go.	number	`0`
`:duration`	Counting speed (animation).	number	`700`

Methods

The HSToggleCount object is contained within the global window object

Method	Description
Public methods
`countUp()`	Force count up.
`countDown()`	Force count down.
`destroy()`	Destroys the instance, removes generated markup (if any), removes added classes and attributes.
Static methods
`HSToggleCount.getInstance(target, isInstance)`	Returns the element associated to the `target`. `target` should be a Node or string (valid selector) `isInstance` boolean. Returns the instance instead of Node if `true`

Force count up (public method).

const toggleCount = new HSToggleCount(document.querySelector('#toggle-count'));
const countUpBtn = document.querySelector('#count-up-btn');

countUpBtn.addEventListener('click', () => {
  toggleCount.countUp();
});

Force count up (mixed).

const { element } = HSToggleCount.getInstance('#toggle-count', true);
const countUpBtn = document.querySelector('#count-up-btn');

countUpBtn.addEventListener('click', () => {
  element.countUp();
});

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Check out Preline UI Components