Tailwind CSS home page
  1. INPUTS
  2. Rating

​
Basic usage

​
Rating Preview

4.95 out of 5

<div class="flex items-center">
    <svg aria-hidden="true" class="w-6 h-6 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>First star</title><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
    <svg aria-hidden="true" class="w-6 h-6 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Second star</title><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
    <svg aria-hidden="true" class="w-6 h-6 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Third star</title><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
    <svg aria-hidden="true" class="w-6 h-6 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Fourth star</title><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
    <svg aria-hidden="true" class="w-6 h-6 text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Fifth star</title><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
    <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
</div>

​
Onclick Rating

User Editable
Read Only
BasicRating.js
import { useState } from 'react'
import { StarIcon } from '@vwjs/icons'

export function BasicRating() {
const [stars, setStars] = useState(4)

const starfill = (num) => {
  if (num <= stars) {
    return 'yellow'
  } else return '#d4d4d8'
}
return (
  <div className="flex border border-black/5 dark:border-white/5 flex-col gap-2 p-4 not-prose relative bg-slate-50 rounded-xl overflow-hidden dark:bg-slate-800/25">
    <span className="text-sm text-gray-600 dark:text-gray-300">User Editable</span>
    <div className="flex flex-row">
      <StarIcon 
        onClick={() => setStars(1)}
        fill={starfill(1)}
        className="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon 
        onClick={() => setStars(2)}
        fill={starfill(2)}
        className="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon 
        onClick={() => setStars(3)}
        fill={starfill(3)}
        className="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon 
        onClick={() => setStars(4)}
        fill={starfill(4)}
        className="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon 
        onClick={() => setStars(5)}
        fill={starfill(5)}
        className="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
    </div>
    <span className="text-sm text-gray-600 dark:text-gray-300">Read Only</span>
    <div className="flex flex-row">
      <StarIcon
        fill={starfill(1)}
        className="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        fill={starfill(2)}
        className="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        fill={starfill(3)}
        className="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        fill={starfill(4)}
        className="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        fill={starfill(5)}
        className="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
    </div>
  </div>
)
}

​
Hover Rating

User Editable
Read Only
HoverRating.js
import { useState } from 'react'
import { StarIcon } from '@vwjs/icons'

export function HoverRating() {
const [stars, setStars] = useState(4)

const starfill = (num) => {
  if (num <= stars) {
    return 'yellow'
  } else return '#d4d4d8'
}
return (
  <div className="flex border border-black/5 dark:border-white/5 flex-col gap-2 p-4 not-prose relative bg-slate-50 rounded-xl overflow-hidden dark:bg-slate-800/25">
    <span className="text-sm text-gray-600 dark:text-gray-300">User Editable</span>
    <div className="flex flex-row">
      <StarIcon
        onClick={() => setStars(1)}
        onMouseEnter={() => setStars(1)}
        onMouseLeave={() => setStars(stars)}
        fill={starfill(1)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        onClick={() => setStars(2)}
        onMouseEnter={() => setStars(2)}
        onMouseLeave={() => setStars(stars)}
        fill={starfill(2)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        onClick={() => setStars(3)}
        onMouseEnter={() => setStars(3)}
        onMouseLeave={() => setStars(stars)}
        fill={starfill(3)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        onClick={() => setStars(4)}
        onMouseEnter={() => setStars(4)}
        onMouseLeave={() => setStars(stars)}
        fill={starfill(4)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        onClick={() => setStars(5)}
        onMouseEnter={() => setStars(5)}
        onMouseLeave={() => setStars(stars)}
        fill={starfill(5)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
    </div>
    <span className="text-sm text-gray-600 dark:text-gray-300">Read Only</span>
    <div className="flex flex-row">
      <StarIcon
        fill={starfill(1)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        fill={starfill(2)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        fill={starfill(3)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        fill={starfill(4)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        fill={starfill(5)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
    </div>
  </div>
)
}

​
Hover Feedback

User Editable
Good
Read Only
Good
HoverFeedback.js
import { useState } from 'react'
import { StarIcon } from '@vwjs/icons'

export function HoverFeedback() {
const [stars, setStars] = useState(4)
const feedback = [
  {
    id: 1,
    name: 'Useless',
  },
  {
    id: 2,
    name: 'Poor',
  },
  {
    id: 3,
    name: 'Ok',
  },
  {
    id: 4,
    name: 'Good',
  },
  {
    id: 5,
    name: 'Excellent',
  },
]
const starfill = (num) => {
  if (num <= stars) {
    return 'yellow'
  } else return '#d4d4d8'
}
return (
  <div className="flex border border-black/5 dark:border-white/5 flex-col gap-2 p-4 not-prose relative bg-slate-50 rounded-xl overflow-hidden dark:bg-slate-800/25">
    <span className="text-sm text-gray-600 dark:text-gray-300">User Editable</span>
    <div className="flex flex-row">
      <StarIcon
        onClick={() => setStars(1)}
        onMouseEnter={() => setStars(1)}
        onMouseLeave={() => setStars(stars)}
        fill={starfill(1)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        onClick={() => setStars(2)}
        onMouseEnter={() => setStars(2)}
        onMouseLeave={() => setStars(stars)}
        fill={starfill(2)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        onClick={() => setStars(3)}
        onMouseEnter={() => setStars(3)}
        onMouseLeave={() => setStars(stars)}
        fill={starfill(3)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        onClick={() => setStars(4)}
        onMouseEnter={() => setStars(4)}
        onMouseLeave={() => setStars(stars)}
        fill={starfill(4)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        onClick={() => setStars(5)}
        onMouseEnter={() => setStars(5)}
        onMouseLeave={() => setStars(stars)}
        fill={starfill(5)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <span className="text-sm pl-4 text-gray-600 dark:text-gray-300">
        {feedback[stars - 1].name}
      </span>
    </div>
    <span className="text-sm text-gray-600 dark:text-gray-300">Read Only</span>
    <div className="flex flex-row">
      <StarIcon
        fill={starfill(1)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        fill={starfill(2)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        fill={starfill(3)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        fill={starfill(4)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarIcon
        fill={starfill(5)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <span className="text-sm pl-4 text-gray-600 dark:text-gray-300">
        {feedback[stars - 1].name}
      </span>
    </div>
  </div>
)
}

​
Emoji Feedback

EmojiFeedback.js
import { useState } from 'react'
import { StarIcon, CloseIcon } from '@vwjs/icons'
import { FaceVomitingEmoji, NeutralFaceEmoji, SlightlySmilingFaceEmoji, SmilingFaceWithHeartEyesEmoji, StarStruckEmoji } from '@vwjs/emoji'
import { Button } from '@vwjs/button'

export function EmojiFeedback() {
const [stars, setStars] = useState(0)
const [feedbac, setFeedbac] = useState(false)
const starfill = (num) => {
  if (num == stars) {
    return 'currentColor'
  } else return '#d4d4d8'
}
const feedback = () => {
  if (feedbac) {
    return (
      <div className="relative flex flex-col bg-gray-200 dark:bg-gray-800 bg-opacity-20 gap-3 p-4 rounded-md shadow-md justify-center items-center w-80">
        <CloseIcon 
          onClick={() => setFeedbac(false)}
          class="w-6 h-6 absolute top-1 right-1 justify-end pl- transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
        />
        <span className="flex justify-center text-gray-900 dark:text-gray-100">
          Send Your feedback
        </span>
        <textarea className="w-full px-4 py-1 text-white dark:text-black pb-4 rounded-md bg-slate-700 dark:bg-slate-300 text-sm min-h-fit max-h-80"></textarea>
        <Button href="/">Send</Button>
      </div>
    )
  }
}
return (
  <div className="flex justify-center items-center border border-black/5 dark:border-white/5 flex-col gap-2 p-4 not-prose relative bg-slate-50 rounded-xl overflow-hidden dark:bg-slate-800/25">
    <div className="flex flex-row">
      <FaceVomitingEmoji
        onMouseEnter={() => setStars(1)}
        onMouseLeave={() => setStars(0)}
        onClick={() => setFeedbac(true)}
        fill={starfill(1)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <NeutralFaceEmoji
        onMouseEnter={() => setStars(1)}
        onMouseLeave={() => setStars(0)}
        onClick={() => setFeedbac(true)}
        fill={starfill(1)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <SlightlySmilingFaceEmoji
        onMouseEnter={() => setStars(1)}
        onMouseLeave={() => setStars(0)}
        onClick={() => setFeedbac(true)}
        fill={starfill(1)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <SmilingFaceWithHeartEyesEmoji
        onMouseEnter={() => setStars(1)}
        onMouseLeave={() => setStars(0)}
        onClick={() => setFeedbac(true)}
        fill={starfill(1)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
      <StarStruckEmoji
        onMouseEnter={() => setStars(1)}
        onMouseLeave={() => setStars(0)}
        onClick={() => setFeedbac(true)}
        fill={starfill(1)}
        class="w-6 h-6 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-100"
      />
    </div>
    {feedback()}
  </div>
)
}

​
usage