Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive rating component

P
edpau 240

@edpau

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi All

From the point of view of accessibility, it is a good practice to hide the input and use button tag for the number circle?

thank you

Community feedback

matias 400

@strikes7

Posted

hi, for this excercide is better to use <input type=radio> with a label due to the need to select only one value, and remove from the view the radiobuttons with css because you can interact with the inputs using the label, the html would look something like:

<label for="first-value">1</label> <input type="radio" id="first-value" name="my-radio" value="1"> <label for="second-value">2</label> <input type="radio" id="second-value" name="my-radio" value="2">

note that to use <input type=radio> in html the name need to be the same for all the inputs.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord