Go instead to the lower limit of Miller's Law (about having 7 +/- 2 options)
That means max 5 elements.
Go instead to the lower limit of Miller's Law (about having 7 +/- 2 options)
That means max 5 elements.
When you pick a filter it loop through this:
- include filter
- exclude filter
- reset / disable filter
This adds flexibility and compress the filters in one go.
I think a
filter=yes/no/none should cover the states.For the UI I can probably help, I think a Chip style design could work... 🤔
This style would also be good for wrapping on mobile with
display: inline-block or flexbox.
A random example I found out there:
<aside> for this and from the new tabs in settings we can reuse the style for getting the boxes
<main class="container float">
<aside class="filternav">
<h4>Filters</h4>
<nav class="tabs">
<a href="https://twtxt.net/?f=localonly" class="current">On twtxt.net</a>
<a href="https://twtxt.net/?f=noreplies">No Replies</a>
<a href="https://twtxt.net/?f=nobots">Exclude Bots</a>
<a href="https://twtxt.net/?f=norss">Exclude Feeds</a>
<a href="https://twtxt.net/">Clear</a>
</nav>
</aside>
In terms of a11y, I have never done that, I guess instead of
<a> it could be styled checkboxes due to the on-off nature.More info here: https://www.a11ymatters.com/pattern/checkbox/
Found here: https://www.sliderrevolution.com/resources/css-checkbox/
@eaplmx your example is nice but it doesn't cover the "exclude" part.
Also I don't see them as checkboxes but more as a navigation option.
I'll try something later myself when on my PC.
Source here
Does this style makes sense for a tri-state filter?