Radio filters
What you're building: a facet where exactly one value can be active — picking a second replaces the first.
Use radio when the values are genuinely exclusive: a delivery option, a single status, a price band.
What you need
- Applies toA Div inside the browse wrapper
The group.
- Applies toThe group
Which facet to filter on.
- Applies toThe group
One value at a time.
- Applies toOne option inside the group
Cloned per facet value.
- Applies toThe input of your own "All" option
The way back to no filter. Set it to the field name.
The "All" option
A radio group needs a way back to no selection. marks the option that means "no filter". It is re-selected whenever the field is cleared, including by a filter chip or a Clear all button.
You author that option yourself. The attribute only marks an option that
already exists: it never creates one. Every option cloned from your
filter-template comes from a facet value Algolia returned, and "All" is not one
of those, so if you do not add a static option there will be nothing to clear
back to.
Two rules decide whether it works:
- It goes on the option, not on the group. The script looks inside the group for it, so an element carrying it is only found when it is a descendant.
- Its value is the field name, the same value as
wf-algolia-field. It is not the visible label.
<div
wf-algolia-element="filter-group"
wf-algolia-field="status"
wf-algolia-type="radio"
>
<!-- Your own "All" option. Static: a sibling of the template, not the
template itself. The value is the field name, and the label is
whatever you want it to read. -->
<label>
<input type="radio" name="status" checked
wf-algolia-default-option="status" />
<span>All</span>
</label>
<label wf-algolia-element="filter-template">
<input type="radio" name="status" />
<span wf-algolia-element="filter-value-text"></span>
</label>
</div>
Give it the same name as the template's input so the browser deselects the
others for you, and put the attribute on the <input> rather than the <label>
so the script can re-check it. Your option survives every refresh of the list,
and stays where you put it, because the script only removes the options it
injected.
wf-algolia-default-option on the filter-group element itself does not work, and
when its value happens to match the field it actively breaks the group: the
clear-back-to-All handler binds to the whole group, so every click inside is
cancelled a moment after it registers and the filter appears to do nothing. Put
it on your "All" option's input.
Once someone picks a value, a radio group offers no way to deselect it. That is what makes it a radio group. If the filter should be escapable, and it almost always should, add the "All" option above. A radio group without one logs a console warning telling you the same thing.
Radio or select?
Both pick one value. Radio shows every option at once; select hides them behind a dropdown. Use radio for three or four options, select for more.
Troubleshooting
| Symptom | Cause | Fix |
|---|---|---|
| Two values can be selected | wf-algolia-type is not radio | Set it on the group |
| No way to clear the filter | No default option | Add the "All" option above |
| The "All" option never appears in the list | You set the attribute but authored no option to go with it | Add a static option; the attribute does not create one |
| Picking any value does nothing | wf-algolia-default-option is on the group instead of an option | Move it onto your "All" option's input |
| The console warns that a default option is missing | The value is a label like All rather than the field name | Set it to the same value as wf-algolia-field |
| Clearing from a chip leaves the group blank | The default option is not inside this group | It must be a descendant of the filter-group |