Custom Form Select

Custom Form Select • Flash Card

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

Required attributes

Dropdown

define the dropdown that be used as <select>

fs-selectcustom-element

dropdown

Select

No attributes needed, the select element should be nested inside the dropdown element

Optional attributes

Label

Required if more than one text element is used inside the Dropdown Toggle

fs-selectcustom-element

label

Clear

Optionally customize the "Select an option" option inside the Select when an option is selected

fs-selectcustom-element

clear

Hide initial option

Use this option to hide the "Select an option" option in the Dropdown when there is no option selected

fs-selectcustom-hideinitial

true

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 .

Copy Script

Add these required attributes to the elements

Dropdown

Dropdown component that will be used as the <select> component design

fs-selectcustom-element

dropdown

Webflow Dropdown component that will serve as the designed Select component.

This Dropdown will 'mirror' the content that is in the nested Select. If there are 10 options in the nested Select, those 10 options will populate in this Dropdown List.

It is required to have a Link / Link Block as the "option template". The Link / Link Block template must be inside the the Dropdown List. The Link / Link Block template must have a single text element inside. This text element will be the dynamic text that mirrors the Select component. See screenshot below.

‍As you select options (Link / Link Blocks) inside the Dropdown List, those options will be selected in the Select component. It will mirror the selections.

The nested Select can be used for Webflow Form submissions, with Attributes' List Filter, and Attributes' List Sort.

Add this attribute:

Name

fs-selectcustom-element

Copy

Value

dropdown

Copy

Elements allowed:

Dropdown

WHERE TO ADD IT

Nested in

Select

The source of the content for the dropdown component

No attributes needed for this Select component.

It is required that to have this nested somewhere inside the Webflow Dropdown component.

This Select component will be the source of the content that populates the custom designed Dropdown component. This Select component should hold the final content of the custom Select options.

Integrates with Attributes' List Select for dynamic custom Selects!

Elements allowed:

Select

Publish your project! Done, easy right?

Check more elements and settings below

Optional

Add options

Label

Use a second Text Block in the Dropdown toggle

fs-selectcustom-element

label

Required if more than one text element is used inside the Dropdown Toggle. If there is only one text element inside the Dropdown Toggle, this attribute is not needed.

Place this attribute on the content inside the Dropdown Toggle that should update with the currently selected option inside the Dropdown. This is the text element that should be dynamic based on what's currently selected.

If "Spain" is the option chosen in the Dropdown List, the label text will update as "Spain".

Add this attribute:

Name

fs-selectcustom-element

Copy

Value

label

Copy

Elements allowed:

Text Block

Clear

Change the "Select an option" message with a custom "Clear" message when an option is selected

fs-selectcustom-element

clear

Optionally customize the "Select an option" option inside the Select when an option is selected.

For example, if "Spain" is selected, instead of seeing "Select an option" as the first option of the Dropdown List, change the message to "Clear selection".

Place this attribute on a Link / Link Block inside the Dropdown List. This Link / Link Block will be used as the content for the "Select an option" option when an option is selected.

Add this attribute:

Name

fs-selectcustom-element

Copy

Value

clear

Copy

Elements allowed:

Text Block

Hide Initial Option

Hide the initial option on the Dropdown when no option is selected

fs-selectcustom-hideinitial

true

Optionally customize the "Select an option" option inside the Select when an option is selected.

For example, if "Spain" is selected, instead of seeing "Select an option" as the first option of the Dropdown List, change the message to "Clear selection".

Place this attribute on a Link / Link Block inside the Dropdown List. This Link / Link Block will be used as the content for the "Select an option" option when an option is selected.

Add this attribute:

Name

fs-selectcustom-hideinitial

Copy

Value

true

Copy

Add it to an element with:

fs-selectcustom-element = "dropdown"

States and interactions

More information on states and interactions

No attributes needed. Fully integrated to Webflow's native states and interactions.

Active state of Link / Link Block elements in the Dropdown List use the Webflow native 'Current' state.

Accessible keyboard navigation uses the Webflow native 'Focus' state.

The Dropdown component used in this solution is fully compatible with native Webflow Interactions.

Optional

Add more

Instances

Define an instance on a common parent wrapper

fs-selectcustom-instance

IDENTIFIER

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

Select a wrapper parent that contains all the elements of an instance.
Add an -instance attribute to it, with a unique value.
Repeat for every instance.

Add this attribute:

Name

fs-selectcustom-instance

Copy

Value

IDENTIFIER

Copy

Examples:

fs-selectcustom-instance = "1"

fs-selectcustom-instance = "2"

fs-selectcustom-instance = "country"

fs-selectcustom-instance = "year"

Learn more ways to set up multiple instances and how it works