List Filter - Possible To Start With Specific Select Value Selected

Attributes
,
1

Hello! I have two instances of a List Filter on the same page, and each one includes a Select field. Is it possible to have one of the Select options selected by default?

I know this is possible with radio buttons and checkboxes, but since each filter only has one Select field, I’m hoping there’s a way to set an initial selected value on a form Select element

2

Hey @lovebrian649!

So there’s no built-in attribute for pre-selecting a <select> element the way there is for radios and checkboxes — checked="checked" works great for radio inputs, and Webflow’s native “Start checked” handles checkboxes, but <select> doesn’t have a documented equivalent in fs-list.

That said, you’ve got two paths forward:

Option 1 — No-code alternative: If your UI can accommodate it, swapping the dropdown for a group of radio buttons gives you native pre-selection out of the box. Just add checked="checked" to whichever radio should be active on load.

Option 2 — JavaScript workaround: You can pre-select a <select> value by setting it after fs-list initializes and dispatching a change event. Here’s the general approach:

window.FinsweetAttributes = window.FinsweetAttributes || [];
window.FinsweetAttributes.push([
  'list',
  (listInstances) => {
    const mySelect = document.querySelector('[fs-list-field="[your-field-identifier]"]');
    if (mySelect) {
      mySelect.value = '[your-option-value]';
      mySelect.dispatchEvent(new Event('change', { bubbles: true }));
    }
  },
]);

Replace [your-field-identifier] with your actual fs-list-field value and [your-option-value] with the exact option you want pre-selected. Since you have two instances, you’ll want to scope this carefully using the correct instance selectors for each.

We’d love to get eyes on your actual setup to give you a more precise snippet — could you share your Webflow read-only link or the HTML for your filter setup? :folded_hands:

Also looping in the team to verify the JS approach and any edge cases specific to your two-instance configuration.

3

Oh amazing

I don’t have the build assembled yet…but I was hoping to make like a price comparison

The project I’m working on has 5 different pricing tiers, so it’s hard to have the full table, especially when it goes down to Tablet and below

I was hoping to build a comparrison where we would have 2 collections lists on the page with a Pricing collection list and use the filters to select on of the tiers

so it would be side by side and the user can select a price from the select dropdown and then the corresponding collection item would show

thats why i would need 2 instances

I appreciate your help and suggestions :folded_hands: