AttRibutes
List Select
What is this page about?

Attributes, by Finsweet, offers a free series of Solutions that provide essential features to improve your Webflow websites.

List Select

Populate a Select Field with a CMS collection in Webflow

Watch a quick tutorial

List Select • Flash Card

Copy Script

For advanced users familiar with this solution. Includes all attributes from this page. Click on attributes and values to copy them.

Required attributes

Collection List

Add to Collection List

fs-list-element
=
"
list
"

Select

Add to Form Select element

fs-list-element
=
"
select
"

Select value

Add to a Text element in the Collection Item

fs-list-element
=
"
select-value
"
1

Add this <script> inside the <head> tag of your page or project

This script is the universal Attribute script: you only need to include it once, even if you have multiple Attribute solutions on the page. Learn more .

<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-list
></script>

Copy Script
2

Add these required attributes to the elements

Collection List

The source list for the Select element's content
fs-list-element
=
"
list
"

This attribute is added to the Collection List that hosts the dynamic content used to populate the Select element.

Add this attribute:
Name
fs-list-element
Copy
Value
list
Copy
Add it to those type(s) of element(s):
Collection List

Select Value

This Text Element is used for populating the Select Field
fs-list-element
=
"
select-value
"

This text acts as the source for the Select Field value. Select options are dynamically generated based on this element.

For instance, if the Collection contains 10 items, the Select Field will produce 10 options, with each option's value derived from this select-value element.

Once its content is used for the Select Field, this List will automatically be removed from the page. Its sole purpose is to gather dynamic data and is not intended for display.

Add this attribute:
Name
fs-list-element
Copy
Value
select-value
Copy
Add it to those type(s) of element(s):
Text Block
IMPORTANT

You can apply the List Filter, List Load, and List Sort Solutions to this Collection List, allowing dynamic updates to the Select element's content based on user interaction.

For example, clicking a Load More link immediately increases the number of items in the Select element. Similarly, activating a Filter or Sort will update and reorder the items accordingly.

Select

The Select Field to populate with the Text Value data
fs-list-element
=
"
select
"

This attribute is added to the dynamic Select Field on the page.

Every Collection Item from the List will be incorporated as a new option within the Select Field.

Add this attribute:
Name
fs-list-element
Copy
Value
select
Copy
Add it to those type(s) of element(s):
Select Field
3

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

Instances

Define an instance on a common parent wrapper

fs-list-instance
=
"
IDENTIFIER
"

If you wish to create multiple instances of this solution on the same page, please follow the steps below:

  1. Select a wrapper parent that contains all the elements of an instance.
  2. Add an -instance attribute to it, with a unique value.
  3. Repeat for every instance.
Add this attribute:
Name
fs-list-instance
Copy
Value
IDENTIFIER
Copy
Examples:
fs-list-instance = "1"
fs-list-instance = "2"
fs-list-instance = "blog"
fs-list-instance = "team"
Learn more ways to set up multiple instances and how it works

Still need help?

Get Support