dropdown Component
Dropdown Class API Reference
| Type | Class/Attribute | Usage | Notes |
|---|---|---|---|
| Base | dropdown |
Required base class | Main container class |
trigger |
Dropdown trigger element | Shows selected value | |
menu |
Dropdown menu container | Contains dropdown items | |
| Size | tiny |
Extra small (28px) | Optional modifier |
small |
Small size (32px) | Optional modifier | |
| (default) | Medium size (40px) | No class needed | |
large |
Large size (48px) | Optional modifier | |
big |
Extra large (56px) | Optional modifier | |
| States | disabled |
Disabled state | Prevents interaction |
error |
Error state | Red border/focus | |
success |
Success state | Green border/focus | |
warning |
Warning state | Yellow border/focus | |
loading |
Loading state | Shows spinner | |
open |
Open state | Auto-applied when open | |
| Features | data-searchable |
Enable search | Adds search input |
data-multiple |
Multiple selection | With checkboxes | |
data-clearable |
Clear button | Adds × button | |
data-placeholder |
Placeholder text | Default prompt | |
| Colors | primary |
Primary color | Blue theme |
positive |
Positive color | Green theme | |
negative |
Negative color | Red theme | |
warning |
Warning color | Yellow theme |
Basic Dropdown
Simple Dropdown
Select an option
With Pre-selected Value
English
With Label and Help Text
Select your country
Select your country of residence
Dropdown Sizes
Size Variations
Tiny
Small
Default
Large
Big
Dropdown States
State Variations
Normal State
Disabled
Error State
Success State
Warning State
Loading...
Searchable Dropdown
With Search Functionality
Type to search countries...
Multiple Selection
Multi-Select with Checkboxes
Select multiple skills
Select all that apply
Dropdown with Icons
Priority Selection with Icons
Select priority level
Status Selection with Colors
Select status
Grouped Items
Categories with Headers
Select a product
Clearable Dropdown
With Clear Button
Selected Option
Click × to clear selection
Color Variants
Themed Dropdowns
Primary Theme
Positive Theme
Negative Theme
Warning Theme
Form Integration
Complete Form Example
JavaScript API
The dropdown component provides a comprehensive JavaScript API for programmatic control and event handling.
Basic API Usage
Control me with JS
// 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>