Forms
Combo Box
A combination of a dropdown list and an editable text input. Users can search for options or enter a value that isn't in the list.
Step #2
Implement in Webflow
Apply attributes to elements on the page
Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.
Required structure
Follow Dropdown, Dropdown Toggle, and Dropdown List nesting rules.
Add this attribute
Description
Name
fs-combobox-element
Value
dropdown
Webflow Dropdown component that will serve as the combo box component.
Webflow Dropdown component comes with a Dropdown Toggle and Dropdown List. We must nest elements in each.
Webflow Dropdown component comes with a Dropdown Toggle and Dropdown List. We must nest elements in each.
Nested inside Dropdown Toggle
Each of these elements must be nested in the Dropdown Toggle.
Add this attribute
Description
Name
fs-combobox-element
Value
text-input
Text Input that allows the user to:
1) Search through combo box options.
As the user types, the option list updates based on the user input. For example, if the user types "mc", all options will be hidden except "McDonalds" and "McHamilton" and "Portamco".
2) Enter a unique value in the input that is not part of the option list.
If the user enters "Applebottom" in the input, and "Applebottom" does not exist as an option, the user will be able to input and submit "Applebottom" as the value of the field.
1) Search through combo box options.
As the user types, the option list updates based on the user input. For example, if the user types "mc", all options will be hidden except "McDonalds" and "McHamilton" and "Portamco".
2) Enter a unique value in the input that is not part of the option list.
If the user enters "Applebottom" in the input, and "Applebottom" does not exist as an option, the user will be able to input and submit "Applebottom" as the value of the field.
Add this attribute
Description
Name
fs-combobox-element
Value
clear
"Clear current option" button
Clicking this button will clear the current value of the text input.
Clicking this button will clear the current value of the text input.
Nested inside Dropdown List
Each of these elements must be nested in the Dropdown List.
Add this attribute
Description
Name
fs-combobox-element
Value
select
Select element that holds all of the options in the combo box.
For example, if we want the combo box to show options "Blue", "Red", and "Green", then this Select element should have "Blue", "Red", and "Green" as the options.
For example, if we want the combo box to show options "Blue", "Red", and "Green", then this Select element should have "Blue", "Red", and "Green" as the options.
Empty
I want this
Div Block or Text Element
See how it works
to show in the combo box list when there are
no matches in the user's search.
Add this attribute
Description
Name
fs-combobox-element
Value
empty
Empty state for the text input.
This can be used as a "No results found" message.
If the user types "Purple" and "Purple" is not an option in the combo box, the empty element will be shown to the user.
This can be used as a "No results found" message.
If the user types "Purple" and "Purple" is not an option in the combo box, the empty element will be shown to the user.
Option template
I want this
Link Block
See how it works
to be the option template for all combo box options
Add this attribute
Description
Name
fs-combobox-element
Value
option-template
Link Block element will be the template for each option in the combo box.
Nest one Text Element inside the Link Block.
The Link Block will be duplicated for each option in the Select element.
The Text Element in the Link Block will update with the text of each option in the Select element.
Nest one Text Element inside the Link Block.
The Link Block will be duplicated for each option in the Select element.
The Text Element in the Link Block will update with the text of each option in the Select element.
Option
prevent clear
I want to enter a unique value in the input that is not part of the option list.
See how it works
Add this attribute
Description
Name
fs-combobox-preventclear
Value
true
Prevents input from being automatically cleared in case the value is not part of the option list.
Where?
Add to the fs-combobox-element = "dropdown" element.
Developer documentation
Check the dev documentation
Next time implement inside Webflow
Use Finsweet Extension
