Movatterモバイル変換

[0]ホーム
URL:

Rating

Tailwind CSS Rating

Use responsive rating component with helper examples for star rating, emoji rating, custom icons & more. Free download, open-source license.

Required ES init: Rating*
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using TW ElementsES format then you should pass the required components to theinitTWE method.

Basic example

Rating is useful for references where there are opinions and experiences, allowing the user to give their own rating.

You can automatically initialize the rating component usingdata-twe-rating-init

                  <ul class="my-1 flex list-none gap-1 p-0" data-twe-rating-init>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            title="Bad"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            title="Poor"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            title="OK"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            title="Good"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            title="Excellent"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>      </ul>
                  // Initialization for ES Users      import {        Rating,        initTWE,      } from "tw-elements";            initTWE({ Rating });

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers.Every share counts, thank you!

Read only

If you want to use a rating to show the score you can use thereadonly option

                  <ul        class="my-1 flex list-none gap-1 p-0"        data-twe-rating-init        data-twe-readonly="true"        data-twe-value="3">        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>      </ul>
                  // Initialization for ES Users      import {        Rating,        initTWE,      } from "tw-elements";            initTWE({ Rating });

Events

Rating emits events after click and hover element. Check the browser console to test it.

                  <ul        id="events-example"        class="my-1 flex list-none gap-1 p-0"        data-twe-rating-init>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>      </ul>
                  import {        Rating,        initTWE,      } from "tw-elements";            initTWE({ Rating });      const icon = document.querySelectorAll('#events-example [data-twe-rating-icon-ref]');      icon.forEach((el) => {        el.addEventListener('scoreHover.twe.rating', (e) => {          console.log('onHover', e);        });        el.addEventListener('scoreSelect.twe.rating', (e) => {          console.log('onSelect', e);        });      })
                  const icon = document.querySelectorAll('#events-example [data-twe-rating-icon-ref]');      icon.forEach((el) => {        el.addEventListener('scoreHover.twe.rating', (e) => {          console.log('onHover', e);        });        el.addEventListener('scoreSelect.twe.rating', (e) => {          console.log('onSelect', e);        });      })

Custom text

You can add extra text before or after the icon usingdata-twe-after anddata-twe-before

                  <ul class="my-1 flex list-none gap-1 p-0" data-twe-rating-init>        <li class="flex px-2">          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref            data-twe-after="1"            data-twe-before="1">            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li class="flex px-2">          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref            data-twe-after="2"            data-twe-before="2">            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li class="flex px-2">          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref            data-twe-after="3"            data-twe-before="3">            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li class="flex px-2">          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref            data-twe-after="4"            data-twe-before="4">            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li class="flex px-2">          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref            data-twe-after="5"            data-twe-before="5">            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>      </ul>
                  // Initialization for ES Users      import {        Rating,        initTWE,      } from "tw-elements";            initTWE({ Rating });

Custom icons

You can use other icons easily. Just change the svg code inside the spans withdata-twe-rating-icon-ref attribute.

                  <ul class="my-1 flex list-none gap-1 p-0" data-twe-rating-init>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />            </svg>          </span>        </li>      </ul>
                  // Initialization for ES Users      import {        Rating,        initTWE,      } from "tw-elements";            initTWE({ Rating });

Number of icons

If you want to display more or less icons in your rating, all you have to do is add as many icons as you like inside the<ul> tag.

                  <ul class="my-1 flex list-none gap-1 p-0" data-twe-rating-init>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>      </ul>
                  // Initialization for ES Users      import {        Rating,        initTWE,      } from "tw-elements";            initTWE({ Rating });

Icons custom color

If you want to set your own icon color for each rating level, you can change thetext class in thedata-twe-rating-icon-ref element.

                  <ul class="my-1 flex list-none gap-1 p-0" data-twe-rating-init>        <li>          <span            class="text-[#673ab7] [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-[#3f51b5] [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-[#2196f3] [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-[#03a9f4] [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-[#00bcd4] [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>      </ul>
                  // Initialization for ES Users      import {        Rating,        initTWE,      } from "tw-elements";            initTWE({ Rating });

Dynamic icons

You can make your rating more dynamic by addingdata-twe-dynamic="true"

                  <ul        class="my-1 flex list-none gap-2 p-0"        data-twe-rating-init        data-twe-dynamic="true"        data-twe-active="bg-current rounded-[50%] !fill-black">        <li>          <span            class="text-[#673ab7] [&>svg]:h-5 [&>svg]:w-5 [&>svg]:fill-current"            data-twe-rating-icon-ref>            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">              <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->              <path                d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm72.4-118.5c9.7-9 10.2-24.2 1.2-33.9C315.3 344.3 290.6 328 256 328s-59.3 16.3-73.5 31.6c-9 9.7-8.5 24.9 1.2 33.9s24.9 8.5 33.9-1.2c7.4-7.9 20-16.4 38.5-16.4s31.1 8.5 38.5 16.4c9 9.7 24.2 10.2 33.9 1.2zM176.4 272c17.7 0 32-14.3 32-32c0-1.5-.1-3-.3-4.4l10.9 3.6c8.4 2.8 17.4-1.7 20.2-10.1s-1.7-17.4-10.1-20.2l-96-32c-8.4-2.8-17.4 1.7-20.2 10.1s1.7 17.4 10.1 20.2l30.7 10.2c-5.8 5.8-9.3 13.8-9.3 22.6c0 17.7 14.3 32 32 32zm192-32c0-8.9-3.6-17-9.5-22.8l30.2-10.1c8.4-2.8 12.9-11.9 10.1-20.2s-11.9-12.9-20.2-10.1l-96 32c-8.4 2.8-12.9 11.9-10.1 20.2s11.9 12.9 20.2 10.1l11.7-3.9c-.2 1.5-.3 3.1-.3 4.7c0 17.7 14.3 32 32 32s32-14.3 32-32z" />            </svg>          </span>        </li>        <li>          <span            class="text-[#3f51b5] [&>svg]:h-5 [&>svg]:w-5 [&>svg]:fill-current"            data-twe-rating-icon-ref>            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">              <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->              <path                d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM174.6 384.1c-4.5 12.5-18.2 18.9-30.7 14.4s-18.9-18.2-14.4-30.7C146.9 319.4 198.9 288 256 288s109.1 31.4 126.6 79.9c4.5 12.5-2 26.2-14.4 30.7s-26.2-2-30.7-14.4C328.2 358.5 297.2 336 256 336s-72.2 22.5-81.4 48.1zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />            </svg>          </span>        </li>        <li>          <span            class="text-[#2196f3] [&>svg]:h-5 [&>svg]:w-5 [&>svg]:fill-current"            data-twe-rating-icon-ref>            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">              <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->              <path                d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM176.4 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm192-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM184 328c-13.3 0-24 10.7-24 24s10.7 24 24 24H328c13.3 0 24-10.7 24-24s-10.7-24-24-24H184z" />            </svg>          </span>        </li>        <li>          <span            class="text-[#03a9f4] [&>svg]:h-5 [&>svg]:w-5 [&>svg]:fill-current"            data-twe-rating-icon-ref>            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">              <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->              <path                d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm177.6 62.1C192.8 334.5 218.8 352 256 352s63.2-17.5 78.4-33.9c9-9.7 24.2-10.4 33.9-1.4s10.4 24.2 1.4 33.9c-22 23.8-60 49.4-113.6 49.4s-91.7-25.5-113.6-49.4c-9-9.7-8.4-24.9 1.4-33.9s24.9-8.4 33.9 1.4zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />            </svg>          </span>        </li>        <li>          <span            class="text-[#00bcd4] [&>svg]:h-5 [&>svg]:w-5 [&>svg]:fill-current"            data-twe-rating-icon-ref>            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">              <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->              <path                d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM183.2 132.6c-1.3-2.8-4.1-4.6-7.2-4.6s-5.9 1.8-7.2 4.6l-16.6 34.7-38.1 5c-3.1 .4-5.6 2.5-6.6 5.5s-.1 6.2 2.1 8.3l27.9 26.5-7 37.8c-.6 3 .7 6.1 3.2 7.9s5.8 2 8.5 .6L176 240.5l33.8 18.3c2.7 1.5 6 1.3 8.5-.6s3.7-4.9 3.2-7.9l-7-37.8L242.4 186c2.2-2.1 3.1-5.3 2.1-8.3s-3.5-5.1-6.6-5.5l-38.1-5-16.6-34.7zm160 0c-1.3-2.8-4.1-4.6-7.2-4.6s-5.9 1.8-7.2 4.6l-16.6 34.7-38.1 5c-3.1 .4-5.6 2.5-6.6 5.5s-.1 6.2 2.1 8.3l27.9 26.5-7 37.8c-.6 3 .7 6.1 3.2 7.9s5.8 2 8.5 .6L336 240.5l33.8 18.3c2.7 1.5 6 1.3 8.5-.6s3.7-4.9 3.2-7.9l-7-37.8L402.4 186c2.2-2.1 3.1-5.3 2.1-8.3s-3.5-5.1-6.6-5.5l-38.1-5-16.6-34.7zm6.3 175.8c-28.9 6.8-60.5 10.5-93.6 10.5s-64.7-3.7-93.6-10.5c-18.7-4.4-35.9 12-25.5 28.1c24.6 38.1 68.7 63.5 119.1 63.5s94.5-25.4 119.1-63.5c10.4-16.1-6.8-32.5-25.5-28.1z" />            </svg>          </span>        </li>      </ul>
                  // Initialization for ES Users      import {        Rating,        initTWE,      } from "tw-elements";            initTWE({ Rating });

Styling active elements

You can usedata-twe-active attribute to change the classes added to the selected elements

                  <ul        class="my-1 flex list-none gap-1 p-0"        data-twe-rating-init        data-twe-active="fill-green-600 text-green-600">        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>      </ul>
                  // Initialization for ES Users      import {        Rating,        initTWE,      } from "tw-elements";            initTWE({ Rating });

Popover implementation example

Rating allows you to easily add popover functionality

                  <ul        id="popover-example"        class="my-1 flex list-none gap-1 p-0"        data-twe-rating-init>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>      </ul>
                  import {        Rating,        Popover,        initTWE,      } from "tw-elements";            initTWE({ Rating });      const popoverIcon = document.querySelectorAll('#popover-example [data-twe-rating-icon-ref]');      popoverIcon.forEach((el) => {        return new Popover(el, {content: 'Example text', placement: 'top'});      })
                  const popoverIcon = document.querySelectorAll('#popover-example [data-twe-rating-icon-ref]');      popoverIcon.forEach((el) => {        return new twe.Popover(el, {content: 'Example text', placement: 'top'});      })

Get selected value

To get the value selected by the user just listen for thescoreSelect.twe.rating event that returns a value. Open the browser console to test how it's work

                  <ul        id="selected-value-example"        class="my-1 flex list-none gap-1 p-0"        data-twe-rating-init>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>        <li>          <span            class="text-primary [&>svg]:h-5 [&>svg]:w-5"            data-twe-rating-icon-ref>            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              stroke-width="1.5"              stroke="currentColor">              <path                stroke-linecap="round"                stroke-linejoin="round"                d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />            </svg>          </span>        </li>      </ul>
                  import {        Rating,        initTWE,      } from "tw-elements";            initTWE({ Rating });      const icons = document.querySelectorAll('#selected-value-example [data-twe-rating-icon-ref]')      icons.forEach((el) => {        el.addEventListener('scoreSelect.twe.rating', (e) => {          console.log(e.value)        })      })
                  const icons = document.querySelectorAll('#selected-value-example [data-twe-rating-icon-ref]')      icons.forEach((el) => {        el.addEventListener('scoreSelect.twe.rating', (e) => {          console.log(e.value)        })      })

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):

Rating - API

Import

Importing components depends on how your application works. If you intend to use the TW elementsES format, you must first import the component and then initialize it with theinitTWE method. If you are going to use theUMD format, just import thetw-elements package.

                    import { Rating, initTWE } from "tw-elements";        initTWE({ Rating });
                    import "tw-elements";

Usage

Via data attributes

Elements with thedata-twe-rating-init attribute will be automatically initialized - you can set all available options with data attributes. For ES format, you must first import and call theinitTWE method.

                    <ul data-twe-rating-init>          ...        </ul>

Via JavaScript

You can access an instance from your Javascript code, by using thegetInstance static method of the Select class - it allows making use of all the public methods listed in theMethods section.

                    const rating = document.getElementByClassName('rating');        const instance = new Rating(rating, options);
                    const rating = document.getElementByClassName('rating');        const instance = new twe.Rating(rating, options);

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name todata-twe-, as indata-twe-value="1".

Name Type DefaultDescription
active stringfill-current Changes the classes added to the active rating elements
after string- Sets a custom text after the icon
before string- Sets a custom text before the icon
dynamic booleanfalse Dynamically change previous icons to the currently selected/hovered icon
readonly Booleanfalse Disable hover, click and keypress events
tooltip String"top" Sets tooltip position. Available directions are:top, right, bottom, left
value string | number- Sets default rating value

Methods

Method DescriptionExample
dispose Removes a Rating instancemyRating.dispose()
getInstance Static method which allows you to get the rating instance associated to a DOM element.Rating.getInstance(myRatingEl)
getOrCreateInstance Static method which returns the rating instance associated to a DOM element or create a new one in case it wasn't initialized.Rating.getOrCreateInstance(myRatingEl)
                    const myRatingEl = document.getElementById('myRating');        const rating = new Rating(myRatingEl);        rating.dispose();
                    const myRatingEl = document.getElementById('myRating');        const rating = new twe.Rating(myRatingEl);        rating.dispose();

Events

Event typeDescription
scoreSelect.twe.rating This event fires immediately when you clicked on icon. The clicked element is available as thetarget property of the event, and selected value as thevalue property.
scoreHover.twe.rating This event fires immediately when you hovered on icon. The hovered element is available as thetarget property of the event, and hovered value as thevalue property.
                    const myRatingEl = document.getElementById('myRating')        myRatingEl.addEventListener('scoreSelect.twe.rating', (e) => {          // do something...        })
[8]ページ先頭
©2009-2025 Movatter.jp