How to do a "star rating" component?

[GalinhaLX]

Hi

I'm trying to have a "star rating" component on my html page:

Does someone have any advice / best practice on how to achieve that ?

ideas:
-use meter ?
-use different inputs for each star?

Is there a working example somewhere?
Regards

[GalinhaLX]

for those who are interested, a working collection of rating stars

https://codepen.io/GATIGA/pen/mdBaGGr

( I guess there's an issue: #811 (comment) )

so I found a turnaround using expressions for the name

[LeaVerou]

This is a bit of a hack, but you could do it with a <meter>, taking advantage of Mavo's special handling for editing <meter> elements. Here is a demo with a <meter> styled to look like a star rating widget: https://codepen.io/leaverou/pen/ZEXVVvj
You could use any other emoji, not just stars. Or any SVG icon!

[GalinhaLX]

broken codepen link

here's the new one from @LeaVerou https://codepen.io/leaverou/pen/gOGZZvw

[GalinhaLX]

Thanks for the example, stars are even more nice :)