🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Grouped Select Dropdown

HTML Markup

<ul class="hoo-select-dropdown hoo-show">
    <li class="hoo-optgroup">
        <div class="hoo-optgroup-name">Fruits</div>
        <ul class="hoo-optgroup-items">
            <li data-value="apple" class="hoo-option " aria-disabled="false">Apple</li>
            <li data-value="banana" class="hoo-option " aria-disabled="false">Banana</li>
            <li data-value="orange" class="hoo-option " aria-disabled="false">Orange</li>
        </ul>
    </li>
    <li class="hoo-optgroup">
        <div class="hoo-optgroup-name">Vegetables</div>
        <ul class="hoo-optgroup-items">
            <li data-value="carrot" class="hoo-option " aria-disabled="false">Carrot</li>
            <li data-value="broccoli" class="hoo-option hoo-disabled" aria-disabled="true">Broccoli</li>
            <li data-value="spinach" class="hoo-option " aria-disabled="false">Spinach</li>
        </ul>
    </li>
    <li class="hoo-optgroup">
        <div class="hoo-optgroup-name">Other</div>
        <ul class="hoo-optgroup-items">
            <li data-value="other" class="hoo-option " aria-disabled="false">Other Items</li>
        </ul>
    </li>
</ul>

An enhanced dropdown component with options organized into logical groups.

Overview

The grouped select dropdown extends the custom select dropdown by organizing options into categorical groups, making it easier for users to find and select from a large number of options.

Usage

Grouped select dropdowns should be used when:

There are many options that can be logically categorized
Users benefit from seeing options organized by category or type
The dropdown contains enough options that grouping improves usability
Users need to quickly find options within specific categories

States

Default - Normal closed state
Open - When the dropdown menu is expanded
Focus - When the component has keyboard focus
Disabled - When the dropdown cannot be interacted with

SCSS

Component Import

SCSS Partial Location

CSS Classes

.hoo-select-dropdown - Container for the custom dropdown
.hoo-select-dropdown-button - The button that triggers the dropdown
.hoo-select-dropdown-text - The selected option text
.hoo-select-dropdown-icon - The dropdown indicator icon
.hoo-select-dropdown-menu - The dropdown menu container
.hoo-select-dropdown-group - Container for a group of options
.hoo-select-dropdown-group-header - Header text for a group
.hoo-select-dropdown-option - Individual option in the dropdown

Accessibility

Use appropriate ARIA roles and attributes
Ensure keyboard navigation works both between and within groups
Implement proper focus management
Support screen readers with appropriate group announcements
When disabled, include aria-disabled="true"