Highlighting the 'View all' filter (radio button) using FinSweet Attributes

@tannerxlatham Thanks for this input!
However I ran into the exact same issue and cannot believe that there is no native solution without any javascript or custom css adding. Also styling the focus state is not the right way, because the focus is lost as soon as users click on another element on the page.

So i tried what you said:
the input radio button (the circle element) has NO identifier attribute but the two attributes you mentioned.
but the behavior is not correct:

  1. when page loads, the show all button is checked, but no entries are shown
  2. when i hit another button, the filter works
  3. when i hit the view all button again, the filter works (it is resetting correctly) BUT the active state is gone. I also found out that the radio element is not really checked then again, which might explain why the active class is not rendered

here a video:

here the link: www.ricketyroom.com/media/
(its password protected, click on the logo and scroll down, use “ricketyroom2023” as password)

i had the exact same problem in another website and also found couple of other forum posts, but the really native solution does not seem to exist :smiley: however according to finsweet, it should be possible.

in their docs they mention on the one hand that you should use the clear attribute on the radio button and combine it with checked=checked.

however in the clear statement they mention it is only possible to apply it on buttons, link blocks or textlinks.

my intention then was to use this clear statement which should clear all filters of one identifier. but they say it needs to be added with an element having the clear statement.

it is veeery confusing :smiley:
if you made it work, please help me further! :slight_smile: