32 lines
1.8 KiB
HTML
32 lines
1.8 KiB
HTML
<div x-data="{ currentVal: 3 }" class="flex items-center gap-1">
|
|
<label for="veryDissatisfied" class="transition hover:scale-125 has-focus:scale-125">
|
|
<span class="sr-only">very dissatisfied</span>
|
|
<input x-model="currentVal" id="veryDissatisfied" type="radio" class="sr-only" name="rating" value="1">
|
|
<span class="text-2xl" x-bind:class="currentVal > 0 ? 'grayscale-0' : 'grayscale'">🥴</span>
|
|
</label>
|
|
|
|
<label for="dissatisfied" class="transition hover:scale-125 has-focus:scale-125">
|
|
<span class="sr-only">dissatisfied</span>
|
|
<input x-model="currentVal" id="dissatisfied" type="radio" class="sr-only" name="rating" value="2">
|
|
<span class="text-2xl" x-bind:class="currentVal > 1 ? 'grayscale-0' : 'grayscale'">😕</span>
|
|
</label>
|
|
|
|
<label for="neutral" class="transition hover:scale-125 has-focus:scale-125">
|
|
<span class="sr-only">neutral</span>
|
|
<input x-model="currentVal" id="neutral" type="radio" class="sr-only" name="rating" value="3">
|
|
<span class="text-2xl" x-bind:class="currentVal > 2 ? 'grayscale-0' : 'grayscale'">😐</span>
|
|
</label>
|
|
|
|
<label for="satisfied" class="transition hover:scale-125 has-focus:scale-125">
|
|
<span class="sr-only">satisfied</span>
|
|
<input x-model="currentVal" id="satisfied" type="radio" class="sr-only" name="rating" value="4">
|
|
<span class="text-2xl" x-bind:class="currentVal > 3 ? 'grayscale-0' : 'grayscale'">😊</span>
|
|
</label>
|
|
|
|
<label for="verySatisfied" class="transition hover:scale-125 has-focus:scale-125">
|
|
<span class="sr-only">very satisfied</span>
|
|
<input x-model="currentVal" id="verySatisfied" type="radio" class="sr-only" name="rating" value="5">
|
|
<span class="text-2xl" x-bind:class="currentVal > 4 ? 'grayscale-0' : 'grayscale'">😍</span>
|
|
</label>
|
|
</div>
|