fs-selectcustom

Create custom Select Dropdown components inside Webflow

Overview

The fs-selectcustom attribute transforms standard Webflow dropdowns into fully customizable select components with rich styling options and enhanced user experience.

Attribute Syntax

The attribute uses the following syntax:

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

Elements

dropdown

Defines the dropdown element that contains the custom select component.

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

label

Defines the label that displays the currently selected option.

<div fs-selectcustom-element="label">
  Select an option
</div>

clear

Defines an option that will remove the selected value and reset the select.

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

Settings

hideinitial

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

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

Usage Examples

Basic Custom Select

<div fs-selectcustom-element="dropdown">
  <!-- Selected label -->
  <div fs-selectcustom-element="label">
    Choose a color
  </div>
  
  <!-- Dropdown toggle -->
  <button class="dropdown-toggle">▼</button>
  
  <!-- Dropdown list -->
  <div class="dropdown-list">
    <a href="#" data-value="red">Red</a>
    <a href="#" data-value="blue">Blue</a>
    <a href="#" data-value="green">Green</a>
  </div>
</div>

How It Works

1. Initializes on Webflow dropdown elements with the dropdown attribute
2. Waits for the fs-list attribute to load (dependency)
3. Populates options from the dropdown list items
4. Updates label when an option is clicked
5. Tracks selection state and manages option visibility
6. Handles keyboard navigation (Space, Tab, Arrow keys)
7. Clears selection when the clear element is clicked
8. Hides/shows clear option based on hideinitial setting

Keyboard Navigation

The custom select supports keyboard controls:

• Space - Toggle dropdown open/closed
• Tab - Navigate between elements
• Arrow Up - Navigate to previous option
• Arrow Down - Navigate to next option
• Enter - Select focused option
• Escape - Close dropdown

Dependencies

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

The custom select works with Webflow’s native dropdown component and enhances it with additional functionality while maintaining the design you create in Webflow.

Use the hideinitial setting to create cleaner UIs where the clear option only appears after a user makes a selection.

Accessibility

The attribute includes built-in accessibility features:

• Full keyboard navigation support
• ARIA attributes for screen readers
• Focus management
• Semantic HTML structure

Ensure your dropdown options use anchor (<a>) tags with appropriate href attributes for proper Webflow dropdown functionality.