🚧 Under Construction

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

Select

HTML Markup

<div class="hoo-select">
    <div id='custom-select-status' class='hidden-visually' aria-live="polite">
    </div>
    <input type="text" id="hoo-select-input" class="hoo-select-text" aria-autocomplete="both"
        aria-controls="custom-select-list" autocomplete="off" >
    <button class="hoo-buttonicon" 
        
        
        ><span class="hoo-icon">
        <svg class="hoo-icon-svg icon-arrow-down" aria-hidden="true">
            <use xlink:href="/htwoo-core/images/icons.svg#icon-arrow-down">
            </use>
        </svg></span>
</button>
<ul class="hoo-select-dropdown">
    <li data-value="" class="hoo-option " aria-disabled="false">
    </li>
</ul>
</div>

Select

The select component provides a dropdown menu for selecting a single option from a list.

Overview

Select inputs (or dropdowns) allow users to choose one option from a list of pre-defined options. They are space-efficient for longer lists of options and provide a standardized selection interface.

Usage

Select inputs should be used when:

There’s a list of mutually exclusive options
Space is limited but the number of options is large
A single selection is required from a predefined list

Variants

Standard Select - Basic dropdown with text options
Grouped Select - Options organized in groups with <optgroup>
Custom Dropdown - Enhanced UI with icons and custom styling

States

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

SCSS

Component Import

SCSS Partial Location

CSS Classes

.hoo-select - Base class for the select element

Accessibility

Always associate with a <label> element
Ensure keyboard navigability within the dropdown
Use aria-expanded for custom select implementations
Ensure sufficient color contrast for all states
When disabled, include aria-disabled="true"

Accessibility implementation based on Making a Better Custom Select Element