dropdown Component

Basic Dropdown

Simple Dropdown

Preview Code
Copy
Select an option
Option 1
Option 2
Option 3
Option 4

With Pre-selected Value

Preview Code
Copy
English
English
Spanish
French
German
Italian

With Label and Help Text

Preview Code
Copy
Select your country
United States
United Kingdom
Canada
Australia
Germany
France

Select your country of residence

Searchable Dropdown

With Search Functionality

Preview Code
Copy
Type to search countries...
Afghanistan
Albania
Algeria
Andorra
Angola
Argentina
Armenia
Australia
Austria
Azerbaijan
Bahamas
Bahrain
Bangladesh
Barbados
Belarus
Belgium
Belize
Benin
Bhutan
Bolivia

Multiple Selection

Multi-Select with Checkboxes

Preview Code
Copy
Select multiple skills
HTML/CSS
JavaScript
React
Vue.js
Angular
Node.js
Python
Java

Select all that apply

Grouped Items

Categories with Headers

Preview Code
Copy
Select a product
Electronics
Laptop
Smartphone
Tablet
Accessories
Headphones
Charger
Phone Case
Services
Extended Warranty
Tech Support

Clearable Dropdown

With Clear Button

Preview Code
Copy
Selected Option
Selected Option
Another Option
Third Option
Fourth Option

Click × to clear selection

Color Variants

Themed Dropdowns

Preview Code
Copy
Primary Theme
Option 1
Option 2
Option 3
Positive Theme
Option 1
Option 2
Option 3
Negative Theme
Option 1
Option 2
Option 3
Warning Theme
Option 1
Option 2
Option 3

Form Integration

Complete Form Example

Preview Code
Copy
Select
Mr.
Mrs.
Ms.
Dr.
Select department
Sales
Marketing
Engineering
Human Resources
Finance
Select skills
Leadership
Communication
Technical
Creative

JavaScript API

The dropdown component provides a comprehensive JavaScript API for programmatic control and event handling.

Basic API Usage

Preview Code
Copy 
// Get dropdown instance
const dropdown = $('.dropdown').data('hyggeDropdown');

// Methods
dropdown.getValue();                    // Get selected value(s)
dropdown.setValue('value');            // Set single value
dropdown.setValue(['val1', 'val2']);   // Set multiple values
dropdown.clearSelection();              // Clear selection
dropdown.open();                        // Open dropdown
dropdown.close();                       // Close dropdown
dropdown.toggle();                      // Toggle open/close

// Events
$('.dropdown').on('dropdown:change', function(e, value, text) {
    console.log('Selected:', value, text);
});

$('.dropdown').on('dropdown:open', function() {
    console.log('Dropdown opened');
});

$('.dropdown').on('dropdown:close', function() {
    console.log('Dropdown closed');
});

$('.dropdown').on('dropdown:clear', function() {
    console.log('Selection cleared');
});

Code Examples

Basic HTML Structure

<div class="dropdown">
    <div class="trigger">
        <span class="placeholder">Select option</span>
    </div>
    <div class="menu">
        <div class="item" data-value="1">Option 1</div>
        <div class="item" data-value="2">Option 2</div>
        <div class="item" data-value="3">Option 3</div>
    </div>
</div>

With All Options

<div class="dropdown" 
     data-searchable="true" 
     data-multiple="true"
     data-clearable="true"
     data-placeholder="Select items">
    <div class="trigger">
        <span class="placeholder">Select items</span>
    </div>
    <div class="menu">
        <div class="item" data-value="1">
            <input type="checkbox"> Item 1
        </div>
        <div class="item" data-value="2">
            <input type="checkbox"> Item 2
        </div>
    </div>
</div>

With Form Field

<div class="dropdown-field">
    <label class="label">
        Field Label <span class="required">*</span>
    </label>
    <div class="dropdown">
        <!-- Dropdown content -->
    </div>
    <p class="help-text">Helper text</p>
</div>