Skip to content
Submitted almost 3 years ago

Pricing Component with Toggle (HTML, CSS, JS)

Ben•770
@BenConfig
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Pricing component with toggle
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Is my toggle okay with regards to accessibility? I made 'Annually' and 'Monthly' the labels of radio button <input>s so that the user can click these or focus on them to change the toggle direction.

Community feedback

  • Raymart Pamplona•16,100
    @pikapikamartPosted almost 3 years ago

    Hey, awesome work on this one. Site in desktop looks great, it is responsive and the mobile state looks great as well.

    Also your toggle works really well. Your usage of input is right and is accessible. Just to further make it accessible, wrap those radio button inside a fieldset along with an sr-only legend element that will describe what those radio buttons are for.

    Some a little suggestion on the site would be:

    • Those items below each card pricings could be inside a ul since those are "list" of information about each of the 3 pricings.

    The site looks great as well to be honest. Really nice work on this one^^

    Marked as helpful
    0
    Ben•770
    @BenConfigPosted almost 3 years ago

    @pikamart Thanks Raymart, I have made the changes you suggested. I'm very happy with this one.

    1

Please log in to post a comment

Log in with GitHub

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