Desktop design

Active states

Submitted state

Mobile design

Interactive rating component

</head>  <body x-data=`{ submitted: false, rating: '', error: false }` class=`antialiased bg-slate-800 min-h-screen grid place-items-center px-4`>

<label :class=`{ 'bg-orange-500 text-white': i == rating, 'hover:bg-slate-500 hover:text-white': i != rating,  'border-2 border-red-700 border-opacity-50': error &amp;&amp; i != rating  }` x-text=`i` :for=`$id('rating', i)` @keyup.space=`rating = i` class=`rounded-full outline-none bg-slate-700 w-12 h-12 grid place-items-center hover:cursor-pointer focus-visible:border-2 focus-visible:border-slate-500 sm:text-lg` tabindex=`0`></labe

/template><form @submit.prevent=`submitted = rating !== ''; error = !rating`>

<label :class=`{ 'bg-orange-500 text-white': i == rating, 'hover:bg-slate-500 hover:text-white': i != rating,  'border-2 border-red-700 border-opacity-50': error &amp;&amp; i != rating  }` x-text=`i` :for=`$id('rating', i)` @keyup.space=`rating = i` class=`rounded-full outline-none bg-slate-700 w-12 h-12 grid place-items-center hover:cursor-pointer focus-visible:border-2 focus-visible:border-slate-500 sm:text-lg hover:bg-slate-500 hover:text-white` tabindex=`0` for=`rating-1-1`>1</lab

<label :class=`{ 'bg-orange-500 text-white': i == rating, 'hover:bg-slate-500 hover:text-white': i != rating,  'border-2 border-red-700 border-opacity-50': error &amp;&amp; i != rating  }` x-text=`i` :for=`$id('rating', i)` @keyup.space=`rating = i` class=`rounded-full outline-none bg-slate-700 w-12 h-12 grid place-items-center hover:cursor-pointer focus-visible:border-2 focus-visible:border-slate-500 sm:text-lg hover:bg-slate-500 hover:text-white` tabindex=`0` for=`rating-1-2`>2</lab

<label :class=`{ 'bg-orange-500 text-white': i == rating, 'hover:bg-slate-500 hover:text-white': i != rating,  'border-2 border-red-700 border-opacity-50': error &amp;&amp; i != rating  }` x-text=`i` :for=`$id('rating', i)` @keyup.space=`rating = i` class=`rounded-full outline-none bg-slate-700 w-12 h-12 grid place-items-center hover:cursor-pointer focus-visible:border-2 focus-visible:border-slate-500 sm:text-lg hover:bg-slate-500 hover:text-white` tabindex=`0` for=`rating-1-3`>3</lab

<label :class=`{ 'bg-orange-500 text-white': i == rating, 'hover:bg-slate-500 hover:text-white': i != rating,  'border-2 border-red-700 border-opacity-50': error &amp;&amp; i != rating  }` x-text=`i` :for=`$id('rating', i)` @keyup.space=`rating = i` class=`rounded-full outline-none bg-slate-700 w-12 h-12 grid place-items-center hover:cursor-pointer focus-visible:border-2 focus-visible:border-slate-500 sm:text-lg hover:bg-slate-500 hover:text-white` tabindex=`0` for=`rating-1-4`>4</lab

<label :class=`{ 'bg-orange-500 text-white': i == rating, 'hover:bg-slate-500 hover:text-white': i != rating,  'border-2 border-red-700 border-opacity-50': error &amp;&amp; i != rating  }` x-text=`i` :for=`$id('rating', i)` @keyup.space=`rating = i` class=`rounded-full outline-none bg-slate-700 w-12 h-12 grid place-items-center hover:cursor-pointer focus-visible:border-2 focus-visible:border-slate-500 sm:text-lg hover:bg-slate-500 hover:text-white` tabindex=`0` for=`rating-1-5`>5</lab

Please log in to post a comment

Community feedback

Rating Component using Tailwind CSS and Alpine.js

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community