Join the Webstudio community

Updated 2 months ago

Radix Default Selection Using Dynamic Data

At a glance
The community member has a Radix select component that pulls options from a Shopify product via GraphQL. They have added a collection to the select to dynamically add the options, and have set the default selectValue data variable to the placeholder and text content to change the value on selection. The issue is that the community member wants the first option in the select to be automatically selected when the page loads. The community members have discussed using the defaultValue attribute from the Radix docs, but are unsure how to implement it in WebStudio. Some community members have suggested binding the first value in the collection to the Tabs instance, but this results in a fixed default value that doesn't change when other options are selected. The community has not found a clear solution to set the first option from the collection as the default on page load.
Useful resources
Hey All, I have a radix select that is pulling options in from my shopify product via the graphql. I have added a collection into the select to dynamically add the options to the select field and have selected the default selectValue data variable to the placeholder and text content in order to change the value on the selction. The only issue is that I would like to have the first option in the select automatically selected when the page loads. Can any one help me figure out how to do this?

Looking in the radix docs I notice it has a defaultValue but I'm not sure how we implement this in webstudio
O
J
a
12 comments
https://docs.webstudio.is/university/core-components/collection.md#using-collections-within-accordions

Also, you can change the default value on the Tabs instance by binding the first value in the collection to it.
when I do this though that value is fixed and doesnt change when I select the other options in the select field.
If you share a builder link I can take a look
Sorry i figured this part out but it still doesnt explain to me how I set an option from the collection as the default options on load
You can bind the first value to it. Ie ${My Data}[0]
So the default is always whatever the first value in your collection is
so in the placeholder?
there's no way to add a collection to a normal select form field right
on what element in the select radix though because that attribute doesn't exisit by default
figure it out thanks
Add a reply
Sign up and join the conversation on Discord