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.
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.
<div
wf-algolia-element="filter-group"
wf-algolia-field="status"
wf-algolia-type="radio"
wf-algolia-default-option="All"
>
<label wf-algolia-element="filter-template">
<input type="radio" />
<span wf-algolia-element="filter-value-text"></span>
</label>
</div>
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, set wf-algolia-default-option.
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 wf-algolia-default-option |
| Clearing from a chip leaves the group blank | The default option name does not match any rendered value | It must match exactly |