fs-combobox

A combo box that helps users select an item from a large list of options

Overview

The fs-combobox attribute creates a combo box component that combines a dropdown with a searchable input field. This allows users to efficiently select items from large lists by typing to filter options.

Attribute Syntax

The attribute uses the following syntax:

fs-combobox-element="[element-type]"

Elements

dropdown

Defines the dropdown element that contains the combo box.

<div fs-combobox-element="dropdown">
  <!-- Dropdown content -->
</div>

label

Defines the label that displays the currently selected option.

<div fs-combobox-element="label">
  Selected: <span>Option 1</span>
</div>

clear

Defines an option that will clear the dropdown selection and input field.

<a fs-combobox-element="clear">Clear selection</a>

empty

Defines a state element that appears when no results are found from the input field search.

<div fs-combobox-element="empty">
  No results found
</div>

Settings

Settings are applied using additional attribute modifiers:

preventclear

If no results are found from the input field search, this prevents the input field from being cleared.

<div 
  fs-combobox-element="dropdown"
  fs-combobox-preventclear="true"
>
  <!-- Dropdown content -->
</div>

hideinitial

Defines if the reset option should be hidden whenever there isn’t an active selection.

<div 
  fs-combobox-element="dropdown"
  fs-combobox-hideinitial="true"
>
  <!-- Dropdown content -->
</div>

Usage Examples

Basic Combo Box

<div fs-combobox-element="dropdown">
  <!-- Input field for searching -->
  <input type="text" placeholder="Search options...">
  
  <!-- Selected label -->
  <div fs-combobox-element="label">Select an option</div>
  
  <!-- Dropdown list -->
  <div class="dropdown-list">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
  
  <!-- Clear button -->
  <button fs-combobox-element="clear">Clear</button>
  
  <!-- Empty state -->
  <div fs-combobox-element="empty" style="display: none;">
    No results found
  </div>
</div>

How It Works

The combo box attribute:

1. Initializes on Webflow dropdowns with the dropdown element attribute
2. Filters options as users type in the input field
3. Updates the label when an option is selected
4. Shows/hides the empty state based on search results
5. Clears selection when the clear element is clicked
6. Supports keyboard navigation for accessibility

Dependencies

This attribute requires the fs-list attribute to be loaded first, as it depends on list functionality for option management.

The combo box works with Webflow’s native dropdown component and extends it with search functionality.