AttRibutes
Combo Box
What is this page about?

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

Combo Box

Combine dropdown list and editable text input in Webflow

Watch a quick tutorial

Combo Box • 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

Dropdown

Add to Dropdown element

fs-combobox-element
=
"
dropdown
"

Text Input

Nested inside Dropdown Toggle

Add to text field

fs-combobox-element
=
"
text-input
"

Clear

Nested inside Dropdown Toggle

Add to Div block, Image, Embed

fs-combobox-element
=
"
clear
"

Select

Nested inside Dropdown List

Add to Select element

fs-combobox-element
=
"
select
"

Empty

Nested inside Dropdown List

Add to Div block or Text element

fs-combobox-element
=
"
empty
"

Option template

Nested inside Dropdown List

Add to Link block

fs-combobox-element
=
"
option-template
"

Optional attributes

Prevent Clear

Add to element with fs-combobox-element = "dropdown"

fs-combobox-preventclear
=
"
true
"
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-combobox
></script>

Copy Script
2

Add these required attributes to the elements

Dropdown

Targets the Combo Box component's base
fs-combobox-element
=
"
dropdown
"

Use the Webflow Dropdown component as the combo box component.

Add this attribute:
Name
fs-combobox-element
Copy
Value
dropdown
Copy
Elements allowed:
Dropdown
WARNING

The Combo Box Attributes Solution requires a specific structure. Use Webflow's Dropdown element. Ensure that both the Dropdown Toggle and the Dropdown List elements are nested within it.

Nested in the Dropdown Toggle element

Text Input

Targets the Combo Box Text Input
fs-combobox-element
=
"
text-input
"

The Text Input allows the user to:

‍

Search through combo box options.
As the user types, the option list dynamically filters to display only the matching entries. For instance, typing "mc" would only show options like "McDonalds," "McHamilton," and "Portamco."
‍

Enter a unique value not included in the option list.
If the user types a value such as "Apple" that doesn't exist in the options, they can still input and submit "Apple" as the field's value.

Add this attribute:
Name
fs-combobox-element
Copy
Value
text-input
Copy
Elements allowed:
Text Input
IMPORTANT

This element must be nested in the Dropdown Toggle element.

Clear

Defines a Clear current input button
fs-combobox-element
=
"
clear
"

Defines an element that acts as a "Clear current option" button. It allows users to erase the current value in the text input with a single click.

Add this attribute:
Name
fs-combobox-element
Copy
Value
clear
Copy
Elements allowed:
Div Block
Image
Embed
IMPORTANT

This element must be nested in the Dropdown Toggle element.

Nested in the Dropdown List element

Select

The Select element containing the options
fs-combobox-element
=
"
select
"

This attribute targets the Select element containing all options available in the combo box.

Add this attribute:
Name
fs-combobox-element
Copy
Value
select
Copy
Elements allowed:
Select
EXAMPLE

For instance, to display the options "Blue", "Red", and "Green" in the combo box, the Select element should include "Blue", "Red", and "Green" as its options.

IMPORTANT

This element must be nested in the Dropdown List element.

Empty

Shows up when there's no match
fs-combobox-element
=
"
empty
"

This represents the Empty state for the text input, functioning as a "No results found" message.

Add this attribute:
Name
fs-combobox-element
Copy
Value
empty
Copy
Elements allowed:
Div Block
Text element
EXAMPLE

If a user types in "Purple" and "Purple" is not available as an option in the combo box, the empty element will be displayed to the user.

IMPORTANT

This element must be nested in the Dropdown List element.

Option Template

The options' template
fs-combobox-element
=
"
option-template
"

This Link Block element acts as the template for each option in the combo box.

Place one Text Element inside the Link Block. This Link Block will be replicated for every option listed in the Select element, and the Text Element within each Link Block will be updated to reflect the text of each corresponding option in the Select element.

Add this attribute:
Name
fs-combobox-element
Copy
Value
option-template
Copy
Elements allowed:
Link Block
IMPORTANT

This element must be nested in the Dropdown List element.

WARNING
The Dropdown element contains 5 other required attributes nested inside.
2

Add these required attributes to the elements

Dropdown

Targets the Combo Box component's base
fs-combobox-element
=
"
dropdown
"

Use the Webflow Dropdown component as the combo box component.

Add this attribute:
Name
fs-combobox-element
Copy
Value
dropdown
Copy
Add it to those type(s) of element(s):
Dropdown
WARNING

The Combo Box Attributes Solution requires a specific structure. Use Webflow's Dropdown element. Ensure that both the Dropdown Toggle and the Dropdown List elements are nested within it.

back arrow

Dropdown Toggle

Nested in the Dropdown Toggle element
back arrow

Text Input

Targets the Combo Box Text Input
fs-combobox-element
=
"
text-input
"

The Text Input allows the user to:

‍

Search through combo box options.
As the user types, the option list dynamically filters to display only the matching entries. For instance, typing "mc" would only show options like "McDonalds," "McHamilton," and "Portamco."
‍

Enter a unique value not included in the option list.
If the user types a value such as "Apple" that doesn't exist in the options, they can still input and submit "Apple" as the field's value.

Add this attribute:
Name
fs-combobox-element
Copy
Value
text-input
Copy
Add it to those type(s) of element(s):
Text Input
IMPORTANT

This element must be nested in the Dropdown Toggle element.

Clear

Defines a Clear current input button
fs-combobox-element
=
"
clear
"

Defines an element that acts as a "Clear current option" button. It allows users to erase the current value in the text input with a single click.

Add this attribute:
Name
fs-combobox-element
Copy
Value
clear
Copy
Add it to those type(s) of element(s):
Div Block
Image
Embed
IMPORTANT

This element must be nested in the Dropdown Toggle element.

back arrow

Dropdown List

Nested in the Dropdown List element
back arrow

Select

The Select element containing the options
fs-combobox-element
=
"
select
"

This attribute targets the Select element containing all options available in the combo box.

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

For instance, to display the options "Blue", "Red", and "Green" in the combo box, the Select element should include "Blue", "Red", and "Green" as its options.

IMPORTANT

This element must be nested in the Dropdown List element.

Empty

Shows up when there's no match
fs-combobox-element
=
"
empty
"

This represents the Empty state for the text input, functioning as a "No results found" message.

Add this attribute:
Name
fs-combobox-element
Copy
Value
empty
Copy
Add it to those type(s) of element(s):
Div Block
Text Block
EXAMPLE

If a user types in "Purple" and "Purple" is not available as an option in the combo box, the empty element will be displayed to the user.

IMPORTANT

This element must be nested in the Dropdown List element.

Option Template

The options' template
fs-combobox-element
=
"
option-template
"

This Link Block element acts as the template for each option in the combo box.

Place one Text Element inside the Link Block. This Link Block will be replicated for every option listed in the Select element, and the Text Element within each Link Block will be updated to reflect the text of each corresponding option in the Select element.

Add this attribute:
Name
fs-combobox-element
Copy
Value
option-template
Copy
Add it to those type(s) of element(s):
Link Block
IMPORTANT

This element must be nested in the Dropdown List element.

3

Publish your project! Done, easy right?

Check more elements and settings below
Optional

Add more

settings

Prevent Clear

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
fs-combobox-preventclear
=
"
true
"

Stops the input from being automatically erased if the entered value is not among the listed options.

Add this attribute:
Name
fs-combobox-preventclear
Copy
Value
true
Copy
Add it to any element with
fs-combobox-element = "dropdown"

Still need help?

Get Support